如何防止使用jQuery的多個下拉菜單中的重複值

我有5個下拉菜單供用戶選擇他們的偏好。所有的下拉菜單都有相同的選擇。如果用戶爲下拉菜單1選擇了一個值，則該選項不應用於其他下拉菜單。它繼續下去，對於最後的下拉菜單，應該有4個不可選項。如何防止使用jQuery的多個下拉菜單中的重複值

它與在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');

我一點需要注意的是，用戶可能會不小心點擊了錯誤的選項的下拉菜單中的一個，所以如果用戶再次選擇，則應該再次啓用原始值。

請建議一種方法。提前致謝。

來源

2014-11-22 user2335065

除了更改選項的狀態馬上的，首先你需要在選擇字段，以獲取當前值，這樣就可以在其他的選擇字段

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

禁用它們上面的代碼可以用於任意數量的選擇框:)

來源

2014-11-22 11:44:44 shaN

謝謝！它的工作原理，但它會導致另一個問題...添加代碼後，選擇的選項值不能發佈到窗體，當我不能提交按鈕..我不知道它爲什麼發生.. – user2335065 2014-11-24 03:29:34

我不要真正按照你的意思，你能爲你的問題設置一個jsfiddle – shaN 2014-11-24 05:40:05

在你的jsfiddle上，如果你在第一個下拉列表中選擇了'2'，並且當你使用Chrome檢查元素，你可以看到選中的選項變成了<選項值=「2」禁用=「禁用」> 2，這意味着所選Dropbox的選項也被禁用。 HTML不會將禁用的值發佈到表單，所以這是問題所在。謝謝！ – user2335065 2014-11-24 06:05:54

如何防止使用jQuery的多個下拉菜單中的重複值

回答

相關問題