0

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>

Improve this question
12
  • did u try anything ? give us some code Commented Jan 22, 2019 at 7:54
  • jsfiddle.net/ruq1jb0c/4 Commented Jan 22, 2019 at 7:54
  • yes, please see in above link @sayalok Commented Jan 22, 2019 at 7:55
  • its not clear to us, what you want to do? can yu explain more?? Commented Jan 22, 2019 at 7:55
  • 1
    You should include your code/jsfiddle in your question not in the comment section. Commented Jan 22, 2019 at 7:56

4 Answers 4

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

great! it works. options will populated again, but user wont able to select duplicate value. Thanks much, I appreciate.
0

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>

Improve this answer

3 Comments

no its not working properly, still i am able to see same selected option in other dropdowns
because you have made default Employee selected. Remove that and add another option when nothing is selected
I am have added empty value, still able to see selected option in other dropdowns, please help me in other way
0

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>

Improve this answer

Comments

0

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

Improve this answer

2 Comments

no its not working as expected, if you see selected value still populated in other dropdown
@Sanjay The current selected value is hidden from others. And recover after change in selection. This is what I think you were asking for.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.