How to disable an option already selected in another select?

Question:

I have five HTML selects with different values, but the options have the same text. How do I compare the text options, instead of the values, and disable the the respective option in every other select? For example, if I have:

<select name="options[70]" id="select_70">

  <option value="1" price="0"> test-1 </option>

  <option value="2" price="0"> test-2 </option>

  <option value="3" price="0"> test-3 </option>

</select>

<select name="options[71]" id="select_71">

  <option value="4" price="0"> test-1 </option>

  <option value="5" price="0"> test-2 </option>

  <option value="6" price="0"> test-3 </option>

</select>

<select name="options[72]" id="select_72">

  <option value="7" price="0"> test-1 </option>

  <option value="8" price="0"> test-2 </option>

  <option value="9" price="0"> test-3 </option>

</select>

<select name="options[73]" id="select_73">

  <option value="10" price="0"> test-1 </option>

  <option value="11" price="0"> test-2 </option>

  <option value="12" price="0"> test-3 </option>

</select>

<select name="options[74]" id="select_74">

  <option value="13" price="0"> test-1 </option>

  <option value="14" price="0"> test-2 </option>

  <option value="15" price="0"> test-3 </option>

</select>

Suppose the user selects the option test-1 in the last select. This should disable the corresponding option in the other selects. How can I achieve that?

ANSWERS:

If I understand you properly, this might be it:

var $selects = $('select');

$selects.on('change', function() {

    var $select = $(this), 

        $options = $selects.not($select).find('option'),

        selectedText = $select.children('option:selected').text();

    var $optionsToDisable = $options.filter(function() {

        return $(this).text() == selectedText;

    });

    $optionsToDisable.prop('disabled', true);

});

//to apply initial selection

$selects.eq(0).trigger('change');

jsFiddle: example

Answer2:

A length example

var $selects = $('select');

available = {};

// Get the text of options from the dropdown

// and store in a object hash 

$('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());

    // set that value to true

    available[selectedVal] = true;

    $selects.not(this).each(function () {

        $('option', this).each(function () {

            var optText = $.trim($(this).text()),

                optCheck = available[optText];

            $(this).prop('disabled', optCheck );

        });

    });

}).change(); // Trigger once to add options at load of first choice

Check Fiddle

ANSWER 3:

Expanding on @IgorDymov's answer (credit should go to him), here's probably what I'd do (seefiddle):

var $selects = $('select');

$selects.on('change', function() {

    $("option", $selects).prop("disabled", false);

    $selects.each(function() {

        var $select = $(this), 

            $options = $selects.not($select).find('option'),

            selectedText = $select.children('option:selected').text();

        $options.each(function() {

            if($(this).text() == selectedText) $(this).prop("disabled", true);

        });

    });

});

$selects.eq(0).trigger('change');

That way we completely refresh the selections each time a new one is made, which means properties become re-enabled again. You'll notice in the fiddle I reduced the number of selects and increased the number of options so that you don't get trapped in a situation where all options are disabled at the same time, I think that makes most sense.

Note: This article is taken from: http://stackoverflow.com/questions/17794064/how-to-disable-an-option-already-selected-in-another-select