在選擇框jquery中選擇選項和過濾器值

Question

我的問題是，當我在任何選擇框中選擇一個選項，然后在其他選擇框中選擇另一個選項時，值會自動更改。 我該怎么解決這個問題。 我想根據我的選擇過濾值，並在不使用插件的情況下將其顯示在表中。

Here is my code:

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

Answer 1

我將您的排序功能合並到一個功能中。

即，fxnSelectYear，fxnSelectMake，fxnSelectModel，fxnSelectSubModel到fxnUpdateGrid

如果你可以將fxnReLoading ..函數合並到一個函數中會更好。

DEMO

希望這可以幫助。 隨意問我問題。

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

Answer 3

哎呀，這對於這么小的任務來說就是很多代碼......

無論如何，在你的每個“更改函數”中，你正在重新加載其他過濾選擇。 這就是重置選擇框的原因

例如：

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

然后我在每個“變更函數”中調用此函數：

$.each(g_Vehicle, function (index) {
  if (isInIndex(g_Vehicle[index])) {
    fxnCreateRow(g_Vehicle, index);
  }
});

這里更新和工作的小提琴： http ： //jsfiddle.net/pW6P6/10/

編輯：您的代碼中可能存在許多優化可能性，其中之一是您應該將jQuery-Objects保存到變量中，並使用它們：

例如：

var $dropDownMake = $('#DropDown_Make');

// and later
$dropDownMake.val()