具有相同选项的多个下拉菜单：如何从其他下拉菜单中删除当前选定的一个下拉菜单项？

Question

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

Answer 1

你会识别元素的值属性，然后遍历所有选择元素，遍历其所有内容，查找具有相同的价值属性值，最终除去使用选项之一：

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/

Answer 2

试试这个：

$(document).ready(function() { 
    $("select").change(function() { 
     var self=this; 

     $("select").each(function() { 
      if (this===self) { 
       return; 
      } 

      $(this).prop('selectedIndex',0); 
     }); 
    }); 
});​ 

Working fiddle