如果在多个 <select> 框中选择，则禁用 jQuery <select> 选项答案

【问题标题】：jQuery <select> option disabled if selected in multiple <select> boxes如果在多个 <select> 框中选择，则禁用 jQuery <select> 选项
【发布时间】：2011-09-05 14:55:18
【问题描述】：

我有一个类似于此处提出的问题：jQuery <select> option disabled if selected in other <select>

但是，我的不同之处在于会有两个以上的选择框。在提供的答案中，当一个选项被选中时，它在其他选择框中设置为禁用（我想要发生），但我不希望在不同的选择框中选择的任何其他选项被禁用删除。

这有意义吗？

示例 html：

<div>
<select name="homepage_select_first">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
</div>
<div>
<select name="homepage_select_second">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>
</div>
<div>
<select name="homepage_select_third">
    <option>No Match</option>
    <option value="1">Test</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>    
</div>

还有 jQuery：

$('select[name*="homepage_select"]').change(function() {

    var value = $(this).val();
    alert(value);
    $('select[name*="homepage_select"]').children('option').each(function(){
        if ( $(this).val() === value ) {
            $(this).attr('disabled', true)//.siblings().removeAttr('disabled');  

        }
    });

});

注释掉.siblings().removeAttr('disabled') 根本不会删除 disabled 属性...但是，只有在任何一个选择框中都没有选中它时，我才想删除它。

基本上，我只想一次在其中一个选项中选择一个选项。我认为如果我只能在刚刚更改的项目上.removeAttr('disabled')，我认为这会起作用。但是，我不知道该怎么做。

有人有什么想法吗？

谢谢！

【问题讨论】：

让我直截了当地说 - 您的所有选择元素都将在没有 disabled 属性的情况下开始，然后一旦选择了一个，它将添加 disabled 属性。如果随后选择了另一个 select 元素，则前一个元素应该删除 disabled 属性，然后当前元素将被禁用？我有这个权利吗？
不完全——假设 homepage_select_first 选择了选项值 1，而 homepage_select_second 选择了选项值 3——这两者都应该在 homepage_select_third 中禁用。但是，如果我在 homepage_select_first 中更改我的选择，它应该会反映在其他两个中，但值 3 应该保持禁用状态，因为它是在 homepage_select_second 中选择的。
好的，所以目标是防止三个选择元素之间的重复选项被选中？
这正是我要找的...

标签： jquery jquery-selectors

【解决方案1】：

应该这样做。基本上可以满足您的 cmets 要求 - 确保所有 3 个选择都有唯一的选择。一旦在 1 个 selext 框中进行了选择，该选项在其他框中将不再可用。

$('select[name*="homepage_select"]').change(function(){


    // start by setting everything to enabled
    $('select[name*="homepage_select"] option').attr('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="homepage_select"]').each(function(){
        var $this = $(this);
        $('select[name*="homepage_select"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val())
               $(this).attr('disabled',true);
        });
    });

});

现场示例：http://jsfiddle.net/QKy4Y/

【讨论】：

我尝试了一段时间，但效果不太好。您的解决方案效果很好。
您的小提琴不起作用：如果您在第一次选择中选择“测试”，则无法重置它
（重置是指再次选择“不匹配”）
@Nicola - 我明白你的意思，但我认为所有选项都是平等的。因此“不匹配”只能选择一次。我看到你的 value != "" 有一个特殊情况。也许这就是OP想要的，我不知道。
效果很好！而且，您是对的，我确实希望始终可以选择“不匹配”。但是，你的代码让我朝着正确的方向前进。这是我添加的内容，以便始终可以选择“不匹配”：jsfiddle.net/dZR6r

【解决方案2】：

你可以这样做：

<div>
    <select id='1' name="homepage_select_first">
        <option value=''>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>
<div>
    <select id='2' name="homepage_select_second">
        <option value=''>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>
</div>
<div>
    <select id='3' name="homepage_select_third">
        <option value=''>No Match</option>
        <option value="1">Test</option>
        <option value="2">Test 2</option>
        <option value="3">Test 3</option>
    </select>    
</div>
$('select[name*="homepage_select"]').change(function() {
    var selectedOptions = $('select option:selected');
    $('select option').removeAttr('disabled');
    selectedOptions.each(function() {
        var value = this.value;
        if (value != ''){           
        var id = $(this).parent('select').attr('id');
        var options = $('select:not(#' + id + ') option[value=' + value + ']');
        options.attr('disabled', 'true');
        }
    });


});

在这里提琴：http://jsfiddle.net/8AcN4/2/

【讨论】：