How do I remove a select option from identical select lists 'b' and 'c' if it's chosen in select list 'a'?

Question

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?

Answer 1

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()

Answer 2

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
});

Answer 3

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()

Answer 4

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

Answer 5

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();
    });           
});