如何使用jQuery防止多个下拉列表中的重复值

Question

我有 5 个下拉菜单供用户选择他们的偏好。所有下拉菜单都有相同的选择。如果用户为下拉菜单 1 选择了一个值，则该选项不应该可用于其他下拉菜单。就这样继续下去，对于最后一个下拉菜单，应该有 4 个不可选择的选项。

这与在 link 上所做的类似。但现在我们有超过 2 个下拉菜单。

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

以下代码适用于两个下拉菜单，但不能超过 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');

我要注意的是，用户可能不小心点击了错误的下拉菜单选项，因此如果用户再次选择，则应再次启用原始值。

请提出一种方法。提前致谢。

Answer 1

不要马上改变选项的状态，首先你需要在选择字段中获取当前值，这样你就可以在其他选择字段中禁用它们

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

上面的代码可以与任意数量的选择框一起使用:)