需要cacade在下拉選項

Question

我有3個下拉菜單有相同的選項設置如下

<select id="one"> 
<option value="1">Select</option> 
<option value="1">One</option> 
<option value="2">Two</option> 
<option value="3">Three</option> 
</select> 
<select id="two"> 
<option value="1">Select</option> 
<option value="1">One</option> 
<option value="2">Two</option> 
<option value="3">Three</option> 
</select> 
<select id="three"> 
<option value="">Select</option> 
<option value="1">One</option> 
<option value="2">Two</option> 
<option value="3">Three</option> 
</select> 

如果用戶選擇在第三個下拉菜單選擇「一」，「一」不應該在1ND和2RD下拉顯示。 在用戶點擊任何下拉菜單的任何時間點，只應顯示當前值以及未在其他下拉菜單中選中的值。

有沒有什麼辦法可以用jQuery實現這個

請大家幫忙。

Answer 1

您的HTML無效。您需要關閉使用</option>

你也需要給不同的值旁邊1作爲-1這樣或留爲空白內部每個第一選項<option>標記您的選擇

然後你就可以像這樣實現您的要求：

$('select').change(function() { 
    var selectedVal = $(this).val(); 
    $(this).siblings('select').find('option[value="' + selectedVal + '"]').hide(); 
    $(this).siblings('select').find(':not(option[value="' + selectedVal + '"])').show(); 
    $(this).siblings('select').find('option:eq(0)').prop('selected', true); 
}); 

Fiddle Demo

Answer 2

此CA n使用您選擇的下拉菜單的事件偵聽器進行處理。 在事件監聽器函數中，從觸發事件的元素中獲取選定值。

一旦你有選定的值，你可以循環其他選擇下拉列表並刪除選定的值。

下面是代碼

$('.dropdown').change(function (event) { 
     $('.dropdown').each(function (index, element) { 

      if (event.target.id == element.id) { 
       return true;    
      } 

      var selectedValue = event.target.value; 
      $(element).children('[value=' + selectedValue + ']').remove(); 
     }); 
    }); 

這是一個完整的工作演示的一小段：

http://jsfiddle.net/399LF/