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

Question

我使用JQuery Steps.In第一步和第二步，我有多個選擇選項的下拉列表。

<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>

在步驟2中（與步驟1相同，但有區別的目的）

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

現在我有3 step.Here我想選擇框like..suppose用戶選擇第三個下拉1,2在步驟1中， 3,4在第二步。

現在，我想在第3步中僅包含5,6框。
怎么做？

旁注：我做了驗證，以防止重復輸入步驟1和步驟2下拉菜單。 表示如果用戶在步驟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");
});

在這里演示

原始答案：

原來這是一個真正的大腦扭曲者。 基本上，您需要：

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");
});

在這里演示

Answer 2

最初，將兩個下拉列表中的值都保留在第3個下拉列表中，然后在第一個和第二個下拉列表中將其選中時，將其從第3個下拉列表中刪除。 這是最簡單的方法。

嘗試使用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");
});