如何使用其他下拉菜單中未選中的選項填充下拉菜單？

Question

我使用JQuery Steps.In第1和第2步，我有一個下拉選擇多個選項。

<select name="numbers" id="numbers"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
</select> 

在第二步（同第一步，但有差異。目的）

<select name="allocate_numbers" id="allocate_numbers"> 
    <option value="1">1</option> 
    : : : 
</select> 

現在我有3 step.Here我希望選擇框like..suppose用戶選擇在步驟1中1,2一個下拉3日，步驟2中的3,4。

現在，我想在第3步中只包含5,6的選擇框。
如何做到這一點？

附註：我完成了驗證，以防止重複輸入step1和step2下拉菜單。 表示如果用戶在步驟1中選擇1,2，則他不能在步驟2中選擇1,2。 我沒有找到合適的標題爲我的佇立，所以隨時編輯它。

Answer 1

更新，更好的答案：

該解決方案被證明是相當簡單的。在第一個下拉列表中找到所有未選定的選項，並過濾未在其他下拉列表中選中的選項。添加事件委派，其結果是：

$(document).on("change", ".numbers", function() { 
    $("#select1").empty(); 
    $(".numbers:eq(0) option:not(:selected)").filter(function() { 
     return $(".numbers:gt(0) option[value=" + this.value + "]:selected").length === 0 
    }).clone().appendTo("#select1"); 
}); 

Demo here

原來的答覆：

事實證明，這是一個真正的腦捻線機。基本上你需要：

1. 準備選擇值的組合列表
2. 遍歷兩個列表中未選擇
3. 過濾器選項選項
4. 過濾器複製
5. 克隆和追加

這裏是我的去吧，但可能有一個更簡單的解決方案：

$("#numbers, #allocate_numbers").on("change", function() { 
    $("#select3").empty(); 
    var selectedValues = [], 
     renderedValues = []; 
    $.merge(selectedValues, $("#numbers").val() || []); 
    $.merge(selectedValues, $("#allocate_numbers").val() || []); 
    $("#numbers option, #allocate_numbers option").filter(function() { 
     if ($.inArray(this.value, selectedValues) === -1) { 
      if ($.inArray(this.value, renderedValues) === -1) { 
       renderedValues.push(this.value); 
       return true; 
      } 
     } 
     return false; 
    }).clone().appendTo("#select3"); 
}); 

Demo here

Answer 2

最初，在第三個下拉列表中保留兩個下拉值，並在第一個和第二個下拉列表中選中時，從第三個下拉列表中刪除這些值。這是最簡單的方法。

嘗試使用jQuery代碼在下拉列表中刪除和添加選項。

Answer 3

如果下拉的一個動態添加那就試試這個：

$(document).on('change','.numbers, #allocate_numbers',function(){ 
    $("#select3").empty(); 
    var selectedValues = [], 
     renderedValues = []; 
      $('.numbers option:selected').each(function() { 
       $.merge(selectedValues, $(this).val() || []); 
      }); 
    $.merge(selectedValues, $("#allocate_numbers").val() || []); 
    $(".numbers option, #allocate_numbers option").filter(function() { 
     if ($.inArray(this.value, selectedValues) === -1) { 
      if ($.inArray(this.value, renderedValues) === -1) { 
       renderedValues.push(this.value); 
       return true; 
      } 
     } 
     return false; 
    }).clone().appendTo("#select3"); 
});