jQuery的選擇選項的副本，使不同的輸出

Question

我試圖從one複製dropdown到another，但是，當它appends它將從previous one刪除options。爲什麼？

我的代碼是：

HTML：

<select id="dropdown" multiple="multiple"> 
    <option value="1">Opt 1</option> 
    <option value="2">Opt 2</option> 
    <option value="3">Opt 3</option> 
</select> 
<select id="options2"></select> 

SCRIPT：

$(document).ready(function(){ 
    $('#dropdown').on('change',function(){ 
     $("#dropdown option:selected").each(function(){ 
      $("#options2").append($(this));    
     }); 
    });  
}); 

小提琴http://jsfiddle.net/5BU4T/

Answer 1

獲取元素的克隆然後追加。

$("#options2").append($(this).clone()); 

Answer 2

嘗試

$("#options2").append("<option value='"+$(this).html()+"'>"+$(this).html()+"</option>");   

Answer 3

使用.clone()還記得忽略重複。

$(document).ready(function(){ 
    $('#dropdown').on('change',function(){ 
     $("#dropdown option:selected").each(function(){ 
      var vThis = $(this); 
      // check if already added in the dropdown, dont append again 
      var toAppend = true; 
      $('#options2 option').each(function(){ 
        if($(this).val() == vThis.val()) 
        { 
         toAppend = false; 
         return; 
        } 
      }); 

      if(toAppend == true) 
       $("#options2").append(vThis.clone());  
     }); 
    });  
}); 

Answer 4

試試這個：

$(document).ready(function(){ 
    $('#dropdown').on('change',function(){ 
     $("#dropdown option:selected").each(function(){ 
      if(!$("#options2 option[value="+$(this).val()+"]").length) 
      //to remove redundancy 
       $("#options2").append($(this).clone());    
     }); 
    });  
});