我使用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>
现在我有了第三步中的第三个下拉菜单。在这里我想要像..这样的选择框。。假设用户在步骤1中选择1,2
,在步骤2中选择3,4
。
现在,我想要在步骤3中只包含5,6
的选择框。
如何做到这一点?
附带说明:我进行了验证,以防止步骤1和步骤2下拉列表中出现重复条目。意味着如果用户在步骤1中选择了1,2,则他不能在步骤2中选择1,2。我找不到适合我的文章的标题,所以请随意编辑。
更新且更好的答案:
事实证明,解决方案相当简单。在第一个下拉列表中查找所有未选中的选项,并筛选在其他下拉列表中未选中的那些选项。添加事件委派,结果为:
$(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");
});
此处演示
如果其中一个下拉列表是动态添加的,请尝试以下操作:
$(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");
});
最初,当在第一个和第二个下拉列表中选择时,将两个下拉值都保留在第三个下拉列表,并从第三个中删除值。这是最简单的方法。
尝试使用jQuery代码在下拉列表中删除和添加选项。