jQuery <select> option disabled if selected

问题:

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 "Test 2" to be disabled in both select statements... and if something else gets checked that it re-enables the previous option.

I have written a sample script here to which I thought would get me 'close'... but it's put me far off base here. Any help would be appreciated.

<script type="text/javascript">
$(document).ready(function(){
 $("select").change(function() {
  $("select").find("option:selected").attr('disabled', true);
 });
});
</script>

<select name="select1">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<select name="select2">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

回答1:

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/

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

回答3:

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.

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