我的问题是,当我在任何一个下拉框中选择一个选项,然后在其他下拉框中选择另一个选项时,值会自动更改。我该如何解决这个问题。我想根据我的选择过滤值,并将其显示在表格中,而不使用插件。
Here is my code:
Here is my code:
如果您想保留您的逻辑,您可以在删除每个选项之前保存所选值,并在重新初始化选择值后重新选择它:
var selected = $('#DropDown_Year option:selected').val();
$('#DropDown_Year option[value]').remove();
iHtmlYear = fxnOptions(g_YearsArray);
$('#DropDown_Year').append(iHtmlYear);
$("#DropDown_Year option[value=" + selected + "]").attr("selected", true);
哇,这么小的任务需要这么多代码...
无论如何,在您的每个“更改函数”中,您都重新加载了其他筛选器选择。这就是为什么选择框被重置的原因。
e.g:
fxnSelectMake = function () {
$('#tableID tr').remove();
g_newRows = "";
$.each(g_Vehicle, function (index) {
if (g_Vehicle[index].Make == $('#DropDown_Make').val()) {
fxnCreateRow(g_Vehicle, index);
}
});
$('#tableID').append(g_newRows);
fxnReLoadingModelFilters(); // <-- this is what i mean
fxnReLoadingSubModelFilters(); // <-- and this
fxnReLoadingYearFilters(); // <-- and this
},
但这只是第一部分。你的主要问题在于这段代码:
$.each(g_Vehicle, function (index) {
if (g_Vehicle[index].Make == $('#DropDown_Make').val()) {
fxnCreateRow(g_Vehicle, index);
}
});
你的g_Vehicle-Object仍然是这里的TOTAL对象,而你只是检查当前选择的值(而不是年份等)
我编写了一个名为“isInIndex”的函数,它检查所有4个当前选择的值,并且仅在当前车辆行对于所有4个选择框都有效时返回true:
isInIndex = function(vehicle) {
return ($("#DropDown_Year").prop("selectedIndex") === 0 || vehicle.Year === $('#DropDown_Year').val()) &&
($("#DropDown_Make").prop("selectedIndex") === 0 || vehicle.Make === $('#DropDown_Make').val()) &&
($("#DropDown_Model").prop("selectedIndex") === 0 || vehicle.Model === $('#DropDown_Model').val()) &&
($("#DropDown_SubModel").prop("selectedIndex") === 0 || vehicle.SubModel === $('#DropDown_SubModel').val())
}
然后我在每个“change-functions”中调用此函数:
$.each(g_Vehicle, function (index) {
if (isInIndex(g_Vehicle[index])) {
fxnCreateRow(g_Vehicle, index);
}
});
这里是更新且可用的 fiddle:http://jsfiddle.net/pW6P6/10/
编辑:你的代码可能有很多优化的可能性之一是应该将 jQuery 对象保存到变量中并使用它们:
例如:
var $dropDownMake = $('#DropDown_Make');
// and later
$dropDownMake.val()