删除另一个选择框中的现有选定选项
问题描述:
我的问题是,我有多个(2个或更多)选择框,所选数据来自JSON文件。删除另一个选择框中的现有选定选项
它应该是这样的。
因此,例如我有2个选择框,这些选择框的数据是'a'和'c'。所以选择框基本看起来像这样
<select id ="box1">
<option value='a'selected>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>
<select id ="box2">
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c' selected>c</option>
</select>
但我不希望发生这种情况。
我想限制从选择选项“一个”上“BOX2”,反之亦然,限制从上“BOX1”
换句话说选择选项“c”的用户的用户,用户可以不接'c'在box1上,也不能在box2上选择'a'。他们唯一可以在box1上选择'c'的时间是如果他们改变box2的选定值。
答
我认为这可以工作,因为它基本上应该循环浏览页面加载页面上的所有选择,并根据页面加载选择的选项找出应该显示或不应显示的内容。
这里的小提琴:https://jsfiddle.net/yps07yf5/3/
function checkTheDropdowns(){
var arr = $('select').find(':selected');
$('select').find('option').show();
$.each($('select'), function(){
var self = this;
var selectVal = $(this).val();
$.each(arr, function(){
if (selectVal !== $(this).val()){
$(self).find('option[value="'+$(this).val()+'"]').hide()
} else {
$(self).find('option[value="'+$(this).val()+'"]').show()
}
});
})
};
checkTheDropdowns();
$('select').on('change', checkTheDropdowns);
有了,你应该能够改变一个,然后它会从所有的休息被删除,也当一个人改变应该更新所有。
答
https://jsfiddle.net/yps07yf5/1/
对于第一个框:
$("#box1").on("change", function() {
let $boxval = $("#box1").val();
$("#box2 > option").each(function(ind) {
let ele = $("#box2 > option").eq(ind);
if (ele.val() === $boxval) ele.attr("disabled", "disabled");
else ele.removeAttr("disabled");
});
});
对于第二个框
$("#box2").on("change", function() {
let $boxval = $("#box2").val();
$("#box1 > option").each(function(ind) {
let ele = $("#box1 > option").eq(ind);
if (ele.val() === $boxval) ele.attr("disabled", "disabled");
else ele.removeAttr("disabled");
});
})
请记住,你可以完全优化这是一个奇异的功能,但我认为这更清楚地告诉你正在发生的事情。
我们获得盒子值,然后迭代另一盒的选项列表,禁用匹配的盒子,并启用不匹配的盒子值。
+0
谢谢你的小提琴!我会试试 –
这就是答案。先生,谢谢你! –