如果在多个框中选择，jQuery选项将被禁用

我有一个类似于这里所问的问题：

但是，我的不同之处在于将有两个以上的选择框。在提供的答案中，当选择某个选项时，我希望在其他选择框中将其设置为禁用，但我不希望在其他选择框中选择的任何其他选项被禁用

这有意义吗

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>

注释out.sides.removeAttr'disabled'永远不会删除disabled属性…但是，我只想在任何一个选择框中未选中它时删除它

基本上，我只希望一次在一个选项中选择一个选项。我想如果我能删除刚刚更改的项目上的'disabled'，我想那会有用的。但是，我不知道该怎么做

有人有什么想法吗

---

谢谢

这应该可以。基本上按照您的评论要求执行-确保所有3个选择都有唯一的选择。在1选择框中进行选择后，该选项在其他框中不再可用

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

});

活生生的例子：

你可以做：

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


});

---

在这里摆弄：

让我直截了当地说吧-您所有的select元素开始时都没有disabled属性，然后一旦选择了一个元素，它就会添加disabled属性。如果选择了另一个select元素，那么前一个元素的disabled属性将被删除，而当前元素将被禁用？我说得对吗？不完全正确-比如说首页选择第一个选项值1被选中，首页选择第二个选项值3被选中-这两个选项都应该在首页选择第三个选项中被禁用。但是，如果我先在homepage\u select\u中更改我的选择，它应该反映在其他两个中，但是值3应该保持禁用状态，因为它是在homepage\u select\u second中选择的。好的，所以我们的目标是防止三个选择元素之间的重复选项被选中？这正是我要寻找的…我尝试了一段时间，但效果不太好。你的解决方案效果很好。你的小提琴不起作用：如果你在第一次选择中选择了测试，你就不能通过重置来重置它。我的意思是选择不匹配另一个time@Nicola-我明白你的意思，但我的选择是平等的。因此，“无匹配”只能选择一次。我看你的有一个特殊的价值案例。也许这就是OP想要的，我不知道。这很有效！而且，你是对的，我确实希望“不匹配”在任何时候都是可选择的。但是，你的密码让我走对了方向。以下是我添加的内容，以便始终可以选择“不匹配”：

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


});