如何使用 jquery 从选择元素中删除选项？

Question

我有 n 个这样的下拉菜单：

<select id="select1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select id="select2">
 <option>1</option>
 <option>2</option>
 <option>3</option>
</select>

具有相同的选项。所有选项都应该是唯一的，因此一旦在一个组合框中选择了该选项，就应该将其从其他组合框中删除。因此，如果用户在 select1 中选择“1”，则在 select2 中将只有选项“2”和“3”。

现在，jQuery disable SELECT options based on Radio selected (Need support for all browsers) 提供了一个不错的解决方案，但我如何修改它以使用选择而不是单选按钮？

Answer 1

这是你的意思吗？

这将从#select2 中删除#select1 中的所有内容：

$("#select2 option").each(function() {
    if($("#select1 option[value=" + this.value + "]").length)
        $(this).remove();
});

这是另一个删除所有重复项的替代方法：

$("select").each(function() {
  var select = $(this);  
  select.children("option").each(function() {
    $('select').not(select).children("option[value=" + this.value + "]").remove();
  });
});

这会删除所有重复项，仅在找到它的第一个 <select> 中留下选项。​

更新您的评论：

$("#select1").change(function() {
 $("#select2 option[value=" + $(this).val()+ "]").remove();
});

Answer 2

或者，如果选择具有相同顺序的相同选项。

$('select').change(function() {
    var selectedIndex = $(this).find(':selected').index();    
    $('select').not(this).find('option:nth-child(' + selectedIndex + ')').remove();
)};

我认为这种方式更快（但不太容易阅读）。