jQuery的<select>选项，如果在多个选定<select>箱

我有一个类似在这里问了一个问题禁用：jQuery <select> option disabled if selected in other <select>jQuery的<select>选项，如果在多个选定<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')这个刚刚更改的项目上工作，我认为这是可行的。但是，我不知道如何去做这件事。

有没有人有任何想法？

谢谢！

来源

2011-09-05 iddimu

让我得到这个直 - 所有你选择的元素将开始没有残疾人属性，那么一旦选择了一个，它就会添加禁用属性。如果选择了另一个选择元素，则以前的元素应该删除禁用的属性，并且当前的元素将被禁用？我有这个权利吗？ – 65Fbef05

不太可能 - 比方说，homepage_select_first选择了选项值1，homepage_select_second选择了选项值3 - 这两个选项都应该在homepage_select_third中禁用。但是，如果我在homepage_select_first中更改了自己的选择内容，则应该在其他两项中反映出来，但是值3应该保持禁用状态，因为它已在homepage_select_second中选定。 – iddimu

好的，所以我们的目标是防止选择三个选择元素之间的重复选项？ – 65Fbef05

这应该做到这一点。基本上做你的意见要求 - 确保所有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/

来源

2011-09-05 15:33:48 Jamiec

我试图想出一段时间的东西，但它没有正常工作。您的解决方案很好。 –

你的小提琴不起作用：如果你在第一个选择中选择“测试”，你不能重置它 –

（通过重置我的意思是selectin“不匹配”另一次） –

你可以这样做：

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

来源

2011-09-05 15:43:38

+1。这个工作得很好。 – Jamiec

jQuery的<select>选项，如果在多个选定<select>箱

回答

相关问题