Question

我有一个问题类似于此处提出的问题：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')根本不会删除已禁用的属性...但是，如果未在任何一个选择框中选择它，我只想将其删除。

基本上，我只想在其中一个选项中选择一个选项。我认为，如果我只能.removeAttr('disabled')关于刚改变的项目，我认为这样可行。但是，我不知道该怎么做。

有没有人有任何想法？

谢谢！

Answer 1

这应该这样做。基本上是您的评论所要求的 - 确保所有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/

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/

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

2 个答案: