0

I know the title isn't very descriptive but I hope i can clarify my problem here: I have multiple identical select dropdowns. Now, what I wan't to do is to remove an option from all other dropdowns if it is chosen in one of them. Here is an example:

I have selects with ids 'a', 'b' and 'c'. All of them contain the following options:

<option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option>

If I now chose option '1' in select list 'a', I want to remove option '1' from lists 'b' and 'c' with JQuery.

Edit: This is basically all I have: http://jsfiddle.net/j91p8eo5/

Anyone got any ideas?

Improve this question
1
  • 4
    Talk is cheap. Show me the code. Commented Nov 25, 2014 at 9:16

5 Answers 5

Reset to default
6

Assuming you want to remove and not hide options(cause with remove element remove completly from the dom):

$("select").on("change", function() { //find all options with specific value(from the selected one) and remove(excluding self) $("select").not(this).find("option[value='" + this.value + "']").remove(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select> <select> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select>

References

.find()

.not()

.remove()

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

Comments

0

Then you could do this

var elems = $('#a,#b,#c'); // cache the variable elems.on('change', function(){ // attach a change handler elems.not(this) // remove the current element from the object .find('[option='+ $(this).val() +']') // find the option to be removed .remove(); // remove it });
Improve this answer

Comments

0

based on Amit Joki anser and this post: jquery select change event get selected option

var elems = $('#a,#b,#c'); elems.on('change', function(e) { var valueSelected = this.value; elems.each(function() { $(this).find('option[value='+ valueSelected +']').remove(); }); });
Improve this answer

Comments

0

If you just want to hide the currently selected option in the other selects you can try something like that:

The selected option of the other selects is getting set onload, depending on the default-value of the first select.

$('#b,#c').find('option[value="' + $('#a').val() + '"]').hide(); //Hide the selected on default selectFirstOption(); $('#a').on('change', function() { $('#b,#c').find('option').show(); $('#b,#c').find('option[value="' + this.value + '"]').hide(); selectFirstOption(); }); function selectFirstOption(){ $('#b,#c').each(function(){ var option = $(this).find('option:visible:first').val(); //Select the first visible option $(this).val(option); }); }

Demo

Improve this answer

Comments

0

You have to look if yous select option contains the string you are selecting in your first select element. Then remove it from all other select element except the one you have selected from. That's it. Try it out,

jQuery :

$("#a").on("change", function(){ $("select").not(this).children("option:contains(" + $(this).val() + ")").remove(); });

jsFiddle

References : .not() , .children() , :contains(), .remove()

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.