如何使用其他下拉列表中未选中的选项填充下拉列表？

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>

在step2中(与step1相同但具有diff目的)

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

现在我在第3步中有第3个下拉列表.在这里我想要selectbox 1,2,如步骤1中的步骤1中的用户选择3,4.

现在,我想要只5,6在步骤3中包含的选择框.
怎么做？

旁注:我做了验证,以防止重复输入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");
});

在这里演示

原始答案:

事实证明这是一个真正的大脑扭转者.基本上你需要:

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

在这里演示