我的应用程序有多个 <select>
下拉菜单显示完全相同的选项列表。一旦我从这些下拉列表之一中选择了一个项目,那么它应该从其他下拉列表中删除所选项目。如何使用 JavaScript 实现此目的?
最佳答案
您将识别元素的 value 属性,然后迭代所有选择元素,迭代其所有内容以查找具有相同 value 属性值的元素,最后使用以下方法删除该选项:
option.parentElement.removeChild(option);
或者,您可以使用 jQuery:
$(document).on('change','select',function(){
$(this).addClass('exception');
$('option[value="' + this.value + '"]:not(.exception *)').remove();
$(this).removeClass('exception');
});
这完成了同样的事情。我可以预见的问题是,经过几次选择后,你将没有选择。您可以尝试禁用这些选项,如下所示:
$(document).on('change','select',function(){
$('option[value="disabled"]').prop('disabled',false);
$(this).addClass('exception');
$('option[value="' + this.value + '"]:not(.exception *)').prop('disabled',true);
$(this).removeClass('exception');
});
关于javascript - 具有相同选项的多个下拉菜单 : how to remove currently selected item of one dropdown from other dropdowns?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13196283/