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



});