如何使用jQuery在多个下拉列表中防止重复值 [英] How to prevent duplicate values in multiple dropdowns using jQuery

问题描述

我有5个下拉菜单供用户选择他们的首选项。所有下拉菜单都有相同的选择。如果用户选择了下拉列表1的值，则该选项不应用于其他下拉列表。而且，最后一个下拉列表中应该有4个不可选择的选项。

这与link 。但现在我们有两个以上的下拉菜单。

 （为了说明，我只显示三个下拉菜单）
 
< select id =_ go > 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< option value =3> 3< / option> 
< / select> 
 
< select id =_ gogo> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< option value =3> 3< / option> 
< / select> 
 
< select id =_ gogogo> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< option value =3> 3< / option> 
< / select> 
  

以下代码适用于两个下拉列表，但不能超过2个。

  var $ select = $（select [id $ ='go']）; 
 $ select.change（function（）{
 $ select 
 .not（this）
 .find（'option'）
 .prop（'disabled' ''）
 .filter（'[value ='+ this.value +']'）
 .prop（'disabled'，'disabled'）; 
}）; 
 $ select.eq（0）.trigger（'change'）;我要注意的是，用户可能会意外点击其中一个下拉列表的错误选项，所以如果用户再次选择，应该再次启用原始值。 
 
 
 
请建议一种方式。感谢提前。
解决方案
而不是立即更改选项的状态，首先需要在选择中获取当前值字段，以便您可以在其他选择的字段中禁用它们
 
 
 演示 
  $（。go）。change（function（）{
 var selVal = []; 
 $（。go）。each（function（）{
 selVal.push（this.value）; 
}）; 
 
 $（this）。 （。go）。find（option）。removeAttr（disabled）。filter（function（）{
 var a = $（this）.parent（select ; 
 return（（$ .inArray（this.value，selVal）> -1）&（this.value！= a））
}）。attr（disabled残疾人）; 
}）; 
 
 $（。go）。eq（0）.trigger（'change'）; 
  
 
 
以上代码可与任意数量的选择框一起使用:) 
 
I have 5 dropdowns menu for users to select their preferences. All the dropdowns have the same choices. If the user has chosen a value for dropdown 1, that option should not be available for the other dropdowns. And it goes on so, for the last dropdown, there should be 4 unselectable options.

It's similar to what is done on this link. But now we have more than 2 dropdowns. 
(For illustration, I show three dropdowns only)    

<select id="_go">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select id="_gogo">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select id="_gogogo">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
The below codes works fine for two dropdowns, but not for more than 2.
var $select = $("select[id$='go']");
$select.change(function() {
    $select
      .not(this)
      .find('option')
      .prop('disabled', '')
      .filter('[value='+this.value+']')
      .prop('disabled','disabled');
});
$select.eq(0).trigger('change');
I thing to notice is that a user may accidentally clicked for a wrong option for one of the dropdowns, so if the user select again, the original value should be enabled again. 

Please suggest a way. Thanks in advance.
解决方案
Instead of changing the status of the option right away, first you need to get current values in the select fields, so that you can disable them in other select fields


 demo
 $(".go").change(function(){
    var selVal=[];
    $(".go").each(function(){
        selVal.push(this.value);
    });

    $(this).siblings(".go").find("option").removeAttr("disabled").filter(function(){
       var a=$(this).parent("select").val();
       return (($.inArray(this.value, selVal) > -1) && (this.value!=a))
    }).attr("disabled","disabled");
});

$(".go").eq(0).trigger('change');


the above code can be used with any number of select boxes :)

                        
这篇关于如何使用jQuery在多个下拉列表中防止重复值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！