如何禁用已在另一个 <select> 中选择的选项？答案

【问题标题】：how to disable an option already selected in another <select>?如何禁用已在另一个 <select> 中选择的选项？
【发布时间】：2013-07-22 17:47:53
【问题描述】：

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

<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>

假设用户在最后一个select 中选择了选项test-1。这应该在其他选择中禁用相应的option。我怎样才能做到这一点？

【问题讨论】：

查看这个帖子stackoverflow.com/questions/16707850/…

标签： javascript jquery html forms magento-1.7

【解决方案1】：

如果我理解正确的话，可能是这样的：

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

【讨论】：

对我来说似乎是一个很好的答案，我可能会采取类似的方法。我唯一要注意的是，您似乎喜欢使用 $ 来表示 jQuery 对象，但您的 selects 变量没有。另外，我认为您可以只使用 each 一次来进行更清洁的过滤。
你为什么对不赞成票感到困惑？你的代码不起作用。尝试在第二个下拉列表中选择“test-2”，然后在第三个下拉列表中选择“test-3”。当您查看第 4 个下拉菜单时，您可以选择“test-2”...这是为什么呢？另外，你为什么要使用$($selects.get(0))？听说过.eq()吗？
@IanClark but your selects variable hasn't got one. - 你在说什么？ $selects, $select, $options, and $optionsToDisable`都是jQuery对象。
@Ian，谢谢，似乎我没有明白这一点，现在它应该可以按预期工作，尽管它没有任何意义，因为您在选择 test-1 后无法选择任何东西, test-2 和 test-3 在不同的下拉菜单中
Ian 我知道，我是说如果你使用美元符号来区分 jQuery 对象，那么你应该保持一致。

【解决方案2】：

扩展@IgorDymov 的答案（应该归功于他），这可能是我要做的（见fiddle）：

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

这样，每次创建新选择时，我们都会完全刷新选择，这意味着属性将再次重新启用。你会注意到在小提琴中我减少了选择的数量并增加了选项的数量，这样你就不会陷入所有选项同时被禁用的情况，我认为这是最有意义的。

【讨论】：

这很好，但我如何修改它以仅确定选择。我有 9 个选择，但只希望它应用于其中的 3 个。提前致谢

【解决方案3】：

长度示例

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

【讨论】：

你可以只做$(this).prop('disabled', optCheck);而不是if-else块

【解决方案4】：

要在当前选定选项的选项标签之间获取文本，您可以这样做：

$('option[value="'+$('select').val()+'"]').text();

它转换为：获取选项的文本，其值与选择中当前列出的值相同

【讨论】：