javascript - 具有相同选项的多个下拉菜单 : how to remove currently selected item of one dropdown from other dropdowns?

Question

我的应用程序有多个 <select>下拉菜单显示完全相同的选项列表。一旦我从这些下拉列表之一中选择了一个项目，那么它应该从其他下拉列表中删除所选项目。如何使用 JavaScript 实现此目的？

Answer 1

您将识别元素的 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');
});

http://jsfiddle.net/PCvT4/

这完成了同样的事情。我可以预见的问题是，经过几次选择后，你将没有选择。您可以尝试禁用这些选项，如下所示:

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

http://jsfiddle.net/ZrsC6/