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測試）