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

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

这是你的意思吗？仅在第一<select>

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

这将删除所有的复制，让他选择：

这将消除一切从#select2这是在#select1：

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

这里的另一个替代方案，删除所有重复它发现它。

更新您的评论：

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

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