警告：我对 Django 和 jQuery/Javascript 都很陌生。到目前为止，它把我逼上一堵墙。我想创建一个搜索页面，允许用户从下拉菜单中选择查询参数，然后在文本框中输入他们的查询文本。我还想动态创建更多搜索栏/下拉菜单。我还希望能够显示有关某些下拉菜单选项可用性的注释（例如，“年份可能不适用于所有记录；没有年份信息的记录将不会在没有附加参数的情况下显示。”）
我现在最头疼的是，我的“更多”按钮似乎起到了“提交”按钮的作用，我看不到任何原因。也就是说，不是显示更多的搜索表单，而是单击“更多”按钮将文本框中的内容传输到 url，就像“提交”应该做的那样。我不知道这是否是我的 javascript 的问题，或者 Django 处理表单的方式，或者什么。就像我说的那样，我完全被这些东西弄湿了，我敢肯定这是我忽略的一些愚蠢的东西，尽管 JSlint 说一切都很好。有人请帮助我。
代码：
var i, i_str, sel_str, add_form, shownote, changeval, changebool, form_array,more_array, note_array, selected_str;
$(document).ready(function () {
i = 1;
i_str = i.toString();
sel_str = (i - 1).toString();
add_form = function () {
form_array = [
'<p><form id="form' + i_str + '" action="" method="get">',
'<select id="row" name="row">',
'<option value="dish_name">Name</option>',
'<option value="year">Year</option>',
'<option value="period">Five-Year Period</option>',
'<option value="location">Location</option>',
'<option value="ingredient">Main Ingredient</option>',
'<option value="course">Course or Dish Type</option>',
'</select>',
'<label for="query">Dish Name</label>',
'<input type="text" name="dish_name" id="query"></input>',
'<button id="more">More</button>',
'<input type="submit" value="Search"></input>'
];
more_array = [
'<select id="bool" name="bool">',
'<option value="none" selected="selected"> </option>',
'<option value="and">AND</option>',
'<option value="or">OR</option>',
'<option value="and_not">AND NOT</option>',
'<option value="or_not">OR NOT</option>',
'</select>'
];
note_array = [
'<p class="note"></p>',
'</form></p>'];
$("#search").append(form_array.join("\n"));
$("option:eq(" + sel_str + ")").attr("selected", "selected");
$("label").text = $(($("this select").val).text);
$("select#row").change(shownote());
$("button").click(function () {
$('input[type="submit"]').hide();
$(".search").append(more_array.join("\n"));
});
i++;
};
$(document).ready(add_form());
});
$(document).ready(function () {
shownote = function () {
switch ($(this).val) {
case "year":
$(".note").append("Note: Year information may not be available for all dishes. Dishes without years will not be returned without additional search criteria.<br />");
break;
case "period":
$(".note").append("Note: Please enter periods in YYYY-YYYY format. Period information may not be available for all dishes. Dishes without periods will not be returned without additional search criteria.<br />");
break;
case "location":
$(".note").append("Note: Location information may not be available for all dishes. Dishes without location information will not be returned without additional search criteria.<br />");
break;
}
};
});
$(document).ready(function () {
changeval = function () {
var changed_to = $("#row").val, get_new_label = function (changed_to) {switch (changed_to) {
case "dish_name":
return "Dish Name";
case "year":
return "Year";
case "period":
return "Five-Year Period";
case "location":
return "Location";
case "ingredient":
return "Main Ingredient";
case "course":
return "Course or Dish Type";
}
};
$('this label[for="query"]').innerHTML = get_new_label(changed_to);
$('this input[id="query"]').attr("name", changed_to);
};
});
$(document).ready(function () {
changebool = function () {
//something that changes the boolean values of the search string
};
});
$("#form" + i_str + " #row").change(changeval());
$("#form" + i_str + " #row").change(shownote());