jQuery<选择>如果在多个 中选择，则禁用该选项盒子

Question

我有一个与这里提出的问题类似的问题： 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>

并且 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') 根本不会删除禁用属性...但是，我只想在未选择它的情况下删除它在任一选择框中。

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

有人有什么想法吗？

谢谢！

Answer 1

这应该可以做到。基本上按照您的评论要求进行操作 - 确保所有 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);
        });
    });

});

实例：http://jsfiddle.net/QKy4Y/

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