jQuery - 恢复删除的选择选项

Question

我有多个下拉菜单具有相同的选项。如果选择了一个选项，其他下拉菜单将不会显示选定的选项。当我尝试重置所选选项时，它不会恢复已移除的选择选项。

HTML部分：

<select id="selectNumber" class="selectbox"> 
    <option value="0">Choose a number</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<select id="selectNumber2" class="selectbox"> 
    <option value="0">Choose a number</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

JavaScript部分：

$(".selectbox").change(function(){ 
    var selectedIndex = $(this).index();  
    var myVal = $(this).val(); 
    $(".selectbox").each(function(i){   
     if (selectedIndex != i){ 
      $("option", this).each(function(){     
       if (myVal == $(this).val() && myVal != 0){ 
        $(this).detach(); 
       }else{ 
        $(this).prepend(); 
        //not work 

       } 

      }); 
     } 
    }); 
}); 

the demo but not working

感谢您的时间。

Answer 1

这应该做你想做的

/* store options */ 
var $selects = $(".selectbox"); 
var $opts = $selects.first().children().clone(); 


$selects.change(function() {  
    var myVal = $(this).val(); 
    if (myVal !='0') { 
     $selects.not(this).children('[value="'+myVal+'"]').remove(); 
    }else{ 
     var replaceVal=$(this).data('currVal'); 
     $selects.not(this).append($opts.filter('[value="'+replaceVal+'"]').clone()) 
    } 
    $(this).data('currVal', myVal); 

}); 

DEMO http://jsfiddle.net/7Ssu7/8/

编辑版本 - 保持排序顺序

/* store options */ 
var $selects = $(".selectbox"); 
var $opts = $selects.first().children().clone(); 


$selects.change(function() { 
    /*create array of all selected values*/  
    var selectedValues=$selects.map(function(){ 
     var val=$(this).val(); 
     return val !=0? val :null; 
    }).get(); 


    $selects.not(this).each(function(){  

     var $sel=$(this), myVal=$sel.val() ||0;   
     var $options=$opts.clone().filter(function(i){ 
      var val=$(this).val();   
      return val==myVal || $.inArray(val, selectedValues) ==-1; 
     }); 
     $sel.html($options).val(myVal) 
    }); 

}); 

DEMO：http://jsfiddle.net/8uunN/1/

Answer 2

当您执行detach（）时，该对象被删除并需要放入一个“全局”变量以保存为参考。 出于您的目的，您可以使用.hide（）和.show（），因为它保留列表中的对象，而不会导致DOM插入或删除（所以对于性能肯定更好）。

Answer 3

那么，你现在的代码是行不通的，因为你没有将选定的值存储在另一个下拉列表中。此外，像其他人一样，使用hide和show而不是detach和prepend。

你可以看到我在jsfiddle溶液（在Firefox测试）