使用jQuery过滤下拉列表中的多个值

Question

I'm doing something that needs to make sure the drop-down value cannot be repeated among the few drop-down.
Which means once the value has selected shouldn't appear again inside the rest drop down

Now I face the problem with when I click the first drop down, the value in the second drop down won't apper(this is what I want), it looks nice and works well. But when I select the second dropdown, the third drop down will show the value what I have been selected in its drop-down(This is not what I want).

 $('#ext1').on('change', function () { if ($(this).data('options') == undefined) { $(this).data('options', $('#ext2 option').clone()); } var val = $(this).val(); var options = $(this).data('options').filter('[value!=\\"' + val + '\\"]'); $('#ext2').html(options); $('#ext2').val('0'); }); $('#ext2').on('change', function () { if ($(this).data('options') == undefined) { $(this).data('options', $('#ext3 option').clone()); } var val = $(this).val(); var options = $(this).data('options').filter('[value!=\\"' + val + '\\"]'); $('#ext3').html(options); $('#ext3').val('0'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dext1"> <label> Extra Vas 1:</label> <select name="ext1" id="ext1" ng-model="FormData.Phases"> <option name="vas" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas" value="1"> VAS 1 </option> <option name="vas" value="2"> VAS 2 </option> <option name="vas" value="3"> VAS 3 </option> </select> </div> <br/> <div id="dext1"> <label> Extra Vas 2:</label> <select name="ext2" id="ext2" ng-model="FormData.Phases"> <option name="vas2" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas2" value="1"> VAS 1 </option> <option name="vas2" value="2"> VAS 2 </option> <option name="vas2" value="3"> VAS 3 </option> </select> </div> <br/> <div id="dext1"> <label> Extra Vas 3:</label> <select name="ext3" id="ext3" ng-model="FormData.Phases"> <option name="vas3" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas3" value="1"> VAS 1 </option> <option name="vas3" value="2"> VAS 2 </option> <option name="vas3" value="3"> VAS 3 </option> </select> </div> 

Answer 1

Just change the line under $('#ext2').on('change', function ()

from:

var options = $(this).data('options').filter('[value!=\"' + val + '\"]');

to:

var options = $(this).data('options').filter('[value!=\"' + val + '\"]').filter('[value!=\"' + $('#ext1').val() + '\"]');

I have include multiple filters to filter out selected value from 1st select box.

 $('#ext1').on('change', function () { if ($(this).data('options') == undefined) { $(this).data('options', $('#ext2 option').clone()); } var val = $(this).val(); var options = $(this).data('options').filter('[value!=\\"' + val + '\\"]'); $('#ext2').html(options); $('#ext2').val('0'); }); $('#ext2').on('change', function () { if ($(this).data('options') == undefined) { $(this).data('options', $('#ext3 option').clone()); } var val = $(this).val(); var options = $(this).data('options').filter('[value!=\\"' + val + '\\"]').filter('[value!=\\"' + $('#ext1').val() + '\\"]'); $('#ext3').html(options); $('#ext3').val('0'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="dext1"> <label> Extra Vas 1:</label> <select name="ext1" id="ext1" ng-model="FormData.Phases"> <option name="vas" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas" value="1"> VAS 1 </option> <option name="vas" value="2"> VAS 2 </option> <option name="vas" value="3"> VAS 3 </option> </select> </div> <br/> <div id="dext1"> <label> Extra Vas 2:</label> <select name="ext2" id="ext2" ng-model="FormData.Phases"> <option name="vas2" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas2" value="1"> VAS 1 </option> <option name="vas2" value="2"> VAS 2 </option> <option name="vas2" value="3"> VAS 3 </option> </select> </div> <br/> <div id="dext1"> <label> Extra Vas 3:</label> <select name="ext3" id="ext3" ng-model="FormData.Phases"> <option name="vas3" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas3" value="1"> VAS 1 </option> <option name="vas3" value="2"> VAS 2 </option> <option name="vas3" value="3"> VAS 3 </option> </select> </div> 

Answer 2

You can also use the disabled state of the options if you want to increase the count of selectboxes. Here's a modified version of yours:

 $("select[name^='ext']").on("change", function() { var selectedValues = []; $("select[name^='ext']").each(function() { if ($(this).val() !== "0") selectedValues.push($(this).val()); }); $("select[name^='ext'] option:not(:selected)").each(function() { if (selectedValues.indexOf($(this).attr("value")) >= 0) { $(this).attr("disabled", "disabled"); } else { $(this).attr("disabled", false); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dext1"> <label> Extra Vas 1:</label> <select name="ext1" id="ext1" ng-model="FormData.Phases"> <option name="vas" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas" value="1"> VAS 1 </option> <option name="vas" value="2"> VAS 2 </option> <option name="vas" value="3"> VAS 3 </option> </select> </div> <br/> <div id="dext2"> <label> Extra Vas 2:</label> <select name="ext2" id="ext2" ng-model="FormData.Phases"> <option name="vas2" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas2" value="1"> VAS 1 </option> <option name="vas2" value="2"> VAS 2 </option> <option name="vas2" value="3"> VAS 3 </option> </select> </div> <br/> <div id="dext3"> <label> Extra Vas 3:</label> <select name="ext3" id="ext3" ng-model="FormData.Phases"> <option name="vas3" selected value="0"> -- NO EXTRA VAS -- </option> <option name="vas3" value="1"> VAS 1 </option> <option name="vas3" value="2"> VAS 2 </option> <option name="vas3" value="3"> VAS 3 </option> </select> </div>