在jQuery中选择选项和筛选值的选择框

Question

我的问题是，当我在任何一个下拉框中选择一个选项，然后在其他下拉框中选择另一个选项时，值会自动更改。我该如何解决这个问题。我想根据我的选择过滤值，并将其显示在表格中，而不使用插件。

Here is my code:

http://jsfiddle.net/pW6P6/4/

- Anshu

---

我同意@roasted的观点。在你的fxnReLoading函数中，你正在重新加载所有选择值。 - Akhil Sekharan

不重新加载页面，我该如何进行过滤？ - Anshu

使用缓存系统，即将对象数组作为g_Vehicle，在每次选择更改和过滤时填充该数组。如果年份选择（主要选择）更改，则从g_Vehicle重新加载原始列表并刷新所有选择框。 - A. Wolff

@Chinnu，我在处理。需要一些时间。 - Akhil Sekharan

@AkhilSekharan 我正在检查。 - Anshu

Answer 1

我将您的排序功能合并为一个函数。

例如，fxnSelectYear，fxnSelectMake，fxnSelectModel，fxnSelectSubModel合并为 fxnUpdateGrid 如果您能将fxnReLoading ..函数合并为一个，那会更好。 演示 希望这有所帮助。如有问题，请随时问我。

- Akhil Sekharan

Answer 2

如果您想保留您的逻辑，您可以在删除每个选项之前保存所选值，并在重新初始化选择值后重新选择它：

http://jsfiddle.net/pW6P6/9/

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);

- Gilles Hemmerlé

---

我会保存所选值，但是网格将被完全重新加载，猜测@Chinnu需要查看一下。 - Akhil Sekharan

我想要过滤相关的选项和表格。 - Anshu

那么，为什么不使用像http://datatables.net/这样的插件呢？它会更快，可能更干净:D而且正是像这个例子一样的东西：http://datatables.net/release-datatables/examples/api/multi_filter_select.html - Gilles Hemmerlé

我想在不使用插件的情况下完成此任务。 - Anshu

Answer 3

哇，这么小的任务需要这么多代码...

无论如何，在您的每个“更改函数”中，您都重新加载了其他筛选器选择。这就是为什么选择框被重置的原因。

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()

- hereandnow78

---

感谢您的耐心等待。这里的选择框没有根据选项进行过滤。 - Anshu

你的意思是什么？期望的行为是什么？在我更新的 fiddle 中，表格会根据所选值进行更新。例如，如果我选择了 2012 年和子型号 d，则会显示 2 行。如果我删除子型号过滤器（选择子型号选择中的第一个选项），则会显示 3 行（2012 年的所有条目）。只需尝试这个 fiddle：http://jsfiddle.net/pW6P6/10/。 - hereandnow78

是的，你说得对。表格正在更新，但选择框选项没有更新。请再检查一下。例如：如果我选择2012年，制造商应该是def、pqr，但它显示了所有选项。 - Anshu

你的代码有点混乱。你应该明确定义所需的行为，并放弃这段代码。挑选部分代码并在新代码中使用它。如果你不想使用插件，把这段代码放到一个插件里（你可以在这里找到模式：https://github.com/addyosmani/jquery-plugin-patterns）。但是你需要清楚地思考你的代码需要做什么（例如，如果选择了一年，是否可以更改此选择？如果不能，你可以禁用此框等等...） - hereandnow78