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

【问题标题】：How to populate a dropdown using unselected options from other dropdowns?如何使用其他下拉列表中未选择的选项填充下拉列表？
【发布时间】：2016-05-03 02:39:25
【问题描述】：

我使用 JQuery Steps。在第一步和第二步中，我有一个带有多个选择选项的下拉菜单。

<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 步中有第 3 个下拉菜单。这里我想要选择框，例如……假设用户在第 1 步中选择 1,2，在第 2 步中选择 3,4。

现在，我想要在步骤 3 中仅包含 5,6 的选择框。
该怎么做？

旁注：我已完成验证，以防止 step1 和 step2 下拉菜单重复输入。表示如果用户在第 1 步中选择 1,2，则他不能在第 2 步中选择 1,2。我没有为我的问题找到合适的标题，所以请随时编辑它。

【问题讨论】：

这三个下拉菜单都在同一个页面上吗？
"现在，我想要" 你想要，没关系，但你想得到什么？

标签： javascript php jquery

【解决方案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

原答案：

结果证明这是一个真正的脑筋急转弯。基本上你需要：

准备选定值的组合列表
遍历两个列表中的选项
未选择的过滤器选项
过滤重复项
克隆和附加

这是我的尝试，但可能有一个更简单的解决方案：

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

【讨论】：

你不能写 $("#numbers option:not(:selected), #allocate_numbers option:not(:selected)").clone().appendTo("#select3");?
查看修改后的答案（原来是一场噩梦）。
非常感谢，对我很有用。
如果动态添加下拉列表之一怎么办？我们使用$('.numbers option:selected').each(function() { 获得它的价值。但是如何使用呢？（我得到了答案，但这个是为了知识目的。）
如果 dropdow 是动态添加的，那么$("#numbers, #allocate_numbers").on() 将不起作用。您需要使用委托。还需要将$.merge 行更改为某种.each()。

【解决方案2】：

如果其中一个下拉列表是动态添加的，那么试试这个：

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

【讨论】：

【解决方案3】：

最初，当在第一个和第二个下拉列表中选择它时，将两个下拉值保留在第 3 个下拉列表中并从第 3 个下拉列表中删除值。这是最简单的方法。

尝试使用 jQuery 代码在下拉菜单中删除和添加选项。

【讨论】：