如何在html select中填充和删除选项

Question

I have four dropdowns and four options, all four dropdowns have same options. I am trying to remove options in other three dropdowns if user selects one option from current dropdown. If user changes again with a new value, new value option should remove and old value should populate again in other dropdowns. I did something but it is not working as expected.

Refer to the following jsFiddle(Updated): http://jsfiddle.net/ruq1jb0c/5/

 $('.inputcontrol').change(function() { var fields = ['Employee', 'Status', 'State', 'Supervisor']; var value = $(this).val(); $('.inputcontrol').not(this).find('option').each(function() { if ($(this).val() == value) { $(this).remove() } }); $('.inputcontrol').each(function() { for (var i = 0; i < fields.length; i++) { if (fields[i] != value) { if ($(this).find("option[value=" + fields[i] + "]").length == 0) { $(this).append("<option value=" + fields[i] + ">" + fields[i] + "</option>"); } } } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="field1" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field2" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field3" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field4" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> 

Answer 1

Ok, here is an exmaple that will make this much simpler. Read the comment to understand how it work

 var selectedFields = ['Employee', '', '', ''] // here is all selected Value for each dropdownList is saved var drps = $(".inputcontrol"); function validate(){ drps.each(function(index, item){ $(this).attr("index", index); // This is important where $(this).index() are not working $(this).find("option").show(); // reset all option to visible var v = $(this).val(); $.each(selectedFields, function(subIndex, subItem){ if (index > subIndex) // here we hide all previews selected values $(item).find("option[value='"+subItem+"']").hide(); }); }); } drps.change(function(){ var itemIndex = eval($(this).attr("index")); selectedFields[itemIndex] = $(this).val() drps.each(function(index, item){ // reset all values of dropdown that are after the current dropdown if (index > itemIndex) { $(this).val("none") selectedFields[index] =""; } }); validate(); }); validate(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="field1" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field2" class="inputcontrol"> <option selected="selected" value="none">none</option> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field3" class="inputcontrol"> <option selected="selected" value="none">none</option> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field4" class="inputcontrol"> <option selected="selected" value="none">none</option> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> 

Answer 2

This made a difference: (as in your jsfiddle link)

if($(this).val()===value)
        $(this).hide()
 else  $(this).show() // this will unhide previously hidden options 

and not '=='

see it in jsFiddle

Answer 3

Try using a class and addClass & removeClass

On change find the option which have class hide and add or remove it

 $('.inputcontrol').change(function(e) { $('.inputcontrol').find('option.hide').removeClass('hide'); $('.inputcontrol').not(this).find('option[value="' + e.target.value + '"]').addClass('hide'); }); 

 .hide { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="field1" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field2" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field3" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <select id="field4" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> 

Answer 4

Check code comments

 $('select').change(function() { // get id to exclude from hiding var id = $(this).attr('id'); // get value select for option hiding reference var val = $(this).val(); // unhide all options $('select option').css('display', 'block'); // loop through all select except the changed one // and hide all options with value from changed select $('select:not(#' + id + ')').each(function() { $(this).find('option[value="' + val + '"]').css('display', 'none'); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="field1" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field2" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field3" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select> <br><br> <select id="field4" class="inputcontrol"> <option value="Employee">Employee</option> <option value="Status">Status</option> <option value="State">State</option> <option value="Supervisor">Supervisor</option> </select>