how to disable an option already selected in another

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: ``` …

Accepted Answer

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

how to disable an option already selected in another <select>?

Solution

Problem

Related problems