CODEWITHSUNDEEP
javascriptjquerydrop-down-menuselectlist
gemini6609
gemini6609

Reputation: 332

Filter results of dropdownlist per prior dropdownlist selection using jquery

I successfully used the jquery script TheSuperTramp posted here:

Jquery dependent drop down boxes populate- how

to remove any list items with a value less than the one selected. However, I need to remove only the value I had selected in the first pull down menu. I believe the following jquery script should accomplish this however it is not. Any suggestions to correct this would be greatly appreciated.

Thanks, KS

var drop2 = $("select[id=dropdown] option"); // the collection of initial options
$("select[id=test]").change(function () {
    var drop1selected = parseInt(this.value); //get drop1 's selected value
    $("select[id=dropdown]")
                     .html(drop2) //reset dropdown list
                     .find('option').filter(function () {
                         if (parseInt(this.value) == drop1selected)
                         {
                             $(this).remove();
                         };
                     });
});

Upvotes: 1

Views: 1913

Answers (1)

Siyu Song
Siyu Song

Reputation: 917

What you actually need here is .each(), instead of .filter():

var drop2 = $("select[id=dropdown] option"); // the collection of initial options
$("select[id=test]").change(function () {
    var drop1selected = parseInt(this.value); //get drop1 's selected value
    $("select[id=dropdown]")
                     .html(drop2) //reset dropdown list
                     .find('option').each(function () {
                         if (parseInt(this.value) === drop1selected)
                         {
                             $(this).remove();
                         };
                     });
});

As .filter() will remove the element from the result set of matching elements, but it will not remove them from the DOM. You may want to use it like this:

var drop2 = $("select[id=dropdown] option"); // the collection of initial options
$("select[id=test]").change(function () {
    var drop1selected = parseInt(this.value); //get drop1 's selected value
    $("select[id=dropdown]")
                     .html(drop2) //reset dropdown list
                     .find('option').filter(function () {
                         return parseInt(this.value) === drop1selected;
                     }).remove();
});

Upvotes: 2

Related Questions