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

Question

我有这样的下拉菜单:

<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禁用基于Radio选择的SELECT选项(需要支持所有浏览器)提供了一个很好的解决方案,但是如何修改它以使用选择而不是单选按钮？

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