javascript - Selecting options and filter values in select box jquery - Stack Overflow

admin管理员组

文章数量:1391969

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:

/

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/pW6P6/4/

• javascript
• jquery

Share Improve this question Follow asked Dec 12, 2012 at 9:30 AnshuAnshu 61677 silver badges1919 bronze badges 7

• When you change selection from any select box, you are reloading all select box and refiltering throw all g_Vehicle list. You would like to filter only current selection without reloading previous (already selected) options. You should rethink about your coding logic. – A. Wolff Commented Dec 12, 2012 at 9:57
• I agree with @roasted. in your fxnReLoading.... you are reloading all select values – Akhil Sekharan Commented Dec 12, 2012 at 10:01
• without reloading how can i do filtering?? – Anshu Commented Dec 12, 2012 at 10:03
• Use a cache system, i mean an array of objects as g_Vehicle that you will populate on each selection change and filtering throw this array. If selection for year (main selection) change, reload original list from g_Vehicle and refresh all select boxes. – A. Wolff Commented Dec 12, 2012 at 10:07
• @Chinnu, I'm on it. Need some time – Akhil Sekharan Commented Dec 12, 2012 at 10:15

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

I bined your sorting functions in to one function.

ie, fxnSelectYear, fxnSelectMake, fxnSelectModel, fxnSelectSubModel to fxnUpdateGrid

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

DEMO

Hope this helps. Feel free to ask me questions.

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

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

本文标签： javascriptSelecting options and filter values in select box jqueryStack Overflow