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

以上代码可以与任意数量的选择框一起使用：）

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

1 个答案: