Selecting options and filter values in select box 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

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

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

},

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

Answer 3

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