在select中删除选项

  1 2 3  
   1 2 3  
   1 2 3  $(".one").change(function(){ }) 

我想做 – 例如，如果我选择第一个位置选项1然后我其他选择此选项应被删除。 因此，如果我在第一次选择我选择1然后在选择第二和第三我只有选项2和3.如果在第二选择我选择2然后在最后选择我只有选项3。

我该怎么做？ 我想使用jQuery。

现场： http ： //jsfiddle.net/9N9Tz/1/

Answer 1

如果你需要对某些东西进行排序，可以考虑使用类似jQuery UI的东西进行排序，因为一堆下拉菜单会让用户体验真的很糟糕。

但要回答你的问题：

 var $selects = $('.one'); $selects.on("keyup click change", function(e) { $selects.not(this).trigger('updateselection'); }).on("updateselection", function(e, data) { var $this = $(this); $this.children().show(); $selects.not(this).each(function() { var value = $(this).val(); if (value) { $this.children('[value="' + value + '"]').hide(); } }); }); 

    1 2 3  
   1 2 3  
   1 2 3  

隐藏选项适用于当前的Firefox。 我不确定遗留浏览器。 隐藏但不移除元素可确保您可以在不损坏输入元素的情况下更改选择。

Answer 2

在这里你去http://jsfiddle.net/Calou/9N9Tz/6/ 。

当的值发生变化时，只需获取此值并在其他搜索带有此值的 ，然后将其删除。

 $(".one").change(function(){ var val = this.value if (val !== '') { $(this).siblings().find('option[value=' + val + ']').remove() } }) 

Answer 3

 // As soon as all selects have one class, you'll have to distinguish them: $(".one").each(function() { // Now this corresponds to one select (in the loop over all) $(this).change(function() { // Fix what've done before $('option').show(); // Find every other select, find an option in it // that has the same value that is selected in current select // (sorry for the description) $('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide(); }); })​;​ 

的jsfiddle

Answer 4

如果你为第二和第三选择元素使用不同的类将很容易

 $(".one").change(function(){ var val = parseInt($(this).val()); $('.two,.three').find('option:contains('+val+')').remove(); }); 

编辑：
更新了代码以申请多项选择。 [感谢所有评论员和Alex让它注意到]

  $(".one").change(function(){ var val = parseInt($(this).val()); $(this).siblings().find('option:contains('+val+')').remove(); });