disable select option value when selected

Question

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

});

Answer 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

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

Answer 3

the first line of your javascript...

var $selects = $('select#players');

...doesn't actually select anything. You need to add an id 'players' to one of your select elements, or change your selector.

Also, I can't figure out what you're actually trying to do. Can you please state more clearly what your aim is?