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

更新和更好的答案:

解决方案结果相当简单.在第一个下拉列表中查找所有未选择的选项,并过滤那些未在其他下拉列表中选择的选项.添加事件委托,结果是:

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

在这里演示

原始答案:

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

准备所选值的组合列表

迭代两个列表中的选项

筛选未选中的选项

过滤重复项

克隆并追加

这是我的目标,但可能有一个更简单的解决方案:

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

在这里演示