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

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

它与此链接上的内容类似。 但现在我们有2个以上的下拉菜单。

(For illustration, I show three dropdowns only)  1 2 3   1 2 3   1 2 3  

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

不要立即更改选项的状态，首先需要在选择字段中获取当前值，以便可以在其他选择字段中禁用它们

演示

  $(".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'); 

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