如何禁用已在其他< select>中选择的选项？

问题描述：

我有五个HTML 选择具有不同的值，但这些选项具有相同的文本。如何比较文本选项而不是值，并在其他选择中禁用相应的选项？例如，如果我有：

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>

假设用户选择 test-1 在最后的中选择。这应该在其他选择中禁用相应的选项。

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?

答

如果我能正确理解你，那可能就是这样：

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：例子

jsFiddle: example

如何禁用已在其他< select>中选择的选项？

相关推荐