Question

我使用JQuery Steps.In第1步和第2步，我有一个带有多个select选项的下拉列表。

<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个下拉列表。在这里，我想要selectbox，例如，在步骤1中，用户选择1,2，在步骤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

原始回答：

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

准备所选值的组合列表
迭代两个列表中的选项
未选择的过滤器选项
过滤重复项
克隆并追加

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

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

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

3 个答案: