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

我有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

现在，它提供了一个很好的解决方案，但是我如何修改它以使用选择而不是单选按钮呢？

这就是您的意思吗

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

下面是另一个删除所有重复项的替代方案：

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

这将删除每个重复项，只在找到它的第一个选项中保留该选项。​

更新您的评论：

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

---

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

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

---

我认为这种方法速度更快，但不太容易阅读。

谢谢，但我只需要删除所选元素。因此，如果用户在select1中选择1，则在select2中只有选项2和3。@Lapa-为此添加了一个选项，您可以看到它在这里工作：+1删除了我的答案，因为您的答案涵盖得很好：但我认为在您的替代方法中，您也应该使用更改而不是更改each@Felix-我认为这是一个渐进的下拉式情况，选择1，然后选择另一个，等等。当然，我可能错了，只是离开了拉帕的评论。我有点心烦意乱，目前正在玩这个问题：：这不像你想的那样工作：一旦你删除第一个元素，顺序就不一样了，你的索引也关闭了：

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