jQuery <select> option disabled if selected in other <select>

Question

I am trying to attempt to disable an option if it is selected in any of the selects

So for example if name=\"select1\" has selected option \"Test 2\", then I want \

Answer 1

The problem with your code is that within the change() routine, you are looking at all of the selects, rather than the one that has changed and disabling all of the selected entries. You need to find the value of the selected entry in question and disable that in other selects, not the current one.

Something like this may be of use [untested]:

$(document).ready(function() {
  $("select").each(function(cSelect) {
    $(this).data('stored-value', $(this).val());
  });

  $("select").change(function() {
    var cSelected = $(this).val();
    var cPrevious = $(this).data('stored-value');
    $(this).data('stored-value', cSelected);

    var otherSelects = $("select").not(this);

    otherSelects.find('option[value=' + cPrevious + ']').removeAttr('disabled');
    otherSelects.find('option[value=' + cSelected + ']').attr('disabled', 'disabled');
  });
});

The stored-value bit is so you know which options to enable in other <select> fields.

Answer 2

Try this:

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
}); 

In case you want to enable a previously disabled option (when the value is unselected from other combo), use this enchanced version:

$(document).ready(function () {
    $("select").change(function () {
        var $this = $(this);
        var prevVal = $this.data("prev");
        var otherSelects = $("select").not(this);
        otherSelects.find("option[value=" + $(this).val() + "]").attr('disabled', true);
        if (prevVal) {
            otherSelects.find("option[value=" + prevVal + "]").attr('disabled', false);
        }

        $this.data("prev", $this.val());
    });
});

Answer 3

Live demo: http://jsfiddle.net/dZqEu/

$('select').change(function() {

    var value = $(this).val();

    $(this).siblings('select').children('option').each(function() {
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true).siblings().removeAttr('disabled');   
        }
    });

});

---

You may prefer this version of the code:

$('select').change(function() {

    $(this)
        .siblings('select')
        .children('option[value=' + this.value + ']')
        .attr('disabled', true)
        .siblings().removeAttr('disabled');

});

Live demo: http://jsfiddle.net/dZqEu/2/

Note that this second version is an one-liner (one line of code) but I formatted it to be more readable. I like this second version better.

---

Also, note that my code assumes that those two SELECT boxes are DOM sibling elements. If that's not your case, then this code - $(this).siblings('select') - will not work for you, and you will have to use jQuery's traversal methods to jump to the other SELECT box.

In the worst-case scenario - when the SELECT boxes are far apart in the DOM tree, and traversing would not be efficient - you can just assign ID attributes to them and use this code to select the other box:

$('#select1, #select2').not(this)

Live demo: http://jsfiddle.net/dZqEu/3/

Answer 4

If you have more than 2 select :

$('select').on('change', function() {
    $('select option').removeAttr('disabled');
    $('select').each(function(i, elt) {
        $('select').not(this).find('option[value="'+$(elt).val()+'"]').attr('disabled', true);
    });
});