disable select option value when selected

问题

I am using this code. But I'm facing a problem that when I select "one" in 1st select box and then in 2nd I select "two" and when I select again 2nd value to "three" but the value "two" remain disabled:

HTML code

// one
<select>
    <option>Select</option>
    <option value="1" >one</option>
    <option value="two">two</option>
    <option>three</option>
</select>
//two
<select>
    <option>Select</option>
    <option value="1" >one</option>
    <option value="two">two</option>
    <option>three</option>
</select>

This is JavaScript code:

$(document).ready(function(e) {

    var $selects = $('select#players');
    available = {};

    $('option', $selects.eq(0)).each(function (i) {
        var val = $.trim($(this).text());
        available[val] = false;
    });

    $selects.change(function () {
        var $this = $(this);
        var selectedVal = $.trim($this.find('option:selected').text());

        available[selectedVal] = true;

        $selects.not(this).each(function () {
            $('option', this).each(function () {
                var optText = $.trim($(this).text()),
                    optCheck = available[optText];
                if(optCheck) {
                    $(this).prop('disabled', true);
                }
                else {
                     $(this).prop('disabled', false);
                }
            });
        });
    }).change(); // Trigger once to add options at load of first

});

回答1:

Assuming you want to disable values in the other select-boxes once chosen, here is a sample.

<select>
    <option value="" selected="selected">Select</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>
<select>
    <option value="" selected="selected">Select</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

$(document).ready(function (e) {
    var $selects = $('select');
    $selects.change(function () {
        var value = $(this).val();
        if (value == "") {
            return false;
        }
        $selects.not(this).each(function () {
            $('option', this).each(function () {
                var sel = $(this).val();
                if (sel == value) {
                    $(this).prop('disabled', true);
                } else {
                    $(this).prop('disabled', false);
                }
            });
        });
    }).change(); // Trigger once to add options at load of first

});

And a working fiddle

回答2:

It's a bit hard to understand what you're asking here. I'm assuming you want to know how to disable an option on both the select boxes when an option is selected in either one. The scenario I'm thinking is that you're displaying a list of players in two select boxes and when one of them is selected by the first team the other team cannot select the same player?

Here's a working fiddle: http://jsfiddle.net/theoutlander/MT5th/. I don't like jquery so I did this in vanilla JS.

// one
<select id="s1" onchange="handleSelection(this, s2)">
    <option>Select</option>
    <option value="1">one</option>
    <option value="two">two</option>
    <option>three</option>
</select>

//two
<select id="s2" onchange="handleSelection(this, s1)">
    <option>Select</option>
    <option value="1" >one</option>
    <option value="two">two</option>
    <option>three</option>
</select>

function handleSelection(source, dest) {
    source.options[source.selectedIndex].disabled=true;
    dest.options[source.selectedIndex].disabled=true;
}