在选择框jquery中选择选项和过滤器值

Question

My problem is when I select an option in anyone of the select box and then selecting another option in other Select box, the values are automatically changing. How can I solve this. I want to filter values according to my selection and display it in a table without using plugins.

Here is my code:

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

Answer 1

I combined your sorting functions in to one function.

ie, fxnSelectYear, fxnSelectMake, fxnSelectModel, fxnSelectSubModel to fxnUpdateGrid

It will be better if you can combine your fxnReLoading.. functions to one .

DEMO

Hope this helps. Feel free to ask me questions.

Answer 2

If you want to conserve your logic. You can save the selected value before deleting each options and select it after you reiitialized your select values :

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

whooo, thats a hell lot of code for such a small task...

anyways, in each of your "change-functions" you are reloading your other filter-selects. thats why the select boxes are reset

eg:

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

},

but this is only part one. your main problem is this piece of code:

$.each(g_Vehicle, function (index) {
  if (g_Vehicle[index].Make == $('#DropDown_Make').val()) {
    fxnCreateRow(g_Vehicle, index);
  }
});

your g_Vehicle-Object is still the TOTAL object here, and you are just checking for the current selected value (not for year and so on)

i have written a function "isInIndex" which checks all 4 current selected values, and only returns true, if the current vehicle row is valid for all 4 select boxes:

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

then i call this function in each of your "change-functions":

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

the updated and working fiddle here: http://jsfiddle.net/pW6P6/10/

edit: there are probably a lot of optimization-possibilities in your code, one of them is that you should save your jQuery-Objects into variables, and work with them:

for example:

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

// and later
$dropDownMake.val()