爲什麼我的選項不會附加到所有選擇

Question

我想生成任意數量的選項並將我以前準備的選項附加到所有選項。但是我的選項僅附加到最後一個選擇，無論有多少選擇。

控制檯報告說，它沒有通過所有選擇迭代...

HTML：

Number of: 
<input type="text" onkeyup="appendSelects(this.value);" /> 
<div id="container"></div> 
<select style="display:none;" id="sample"> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select> 

的Javascript：

$('#container').html(''); 
for (var i = 0; i < n; i++) { 
    $('#container').append('<select id="'+i+'"></select>'); 
} 

var options = $('#sample option').clone(); 
$('#container select').each(function(){ 
    $(this).append(options); 
    console.log('appended options to '+$(this).attr('id')); 
}); 

小提琴位於： http://jsfiddle.net/Ck9Wb/1/

我哪裏做錯了？

Answer 1

的問題是你追加相同的DOM元素實例到多個元素

window.appendSelects = function(n) { 
    $('#container').html(''); 
    for (var i = 0; i < n; i++) { 
     $('#container').append('<select id="'+i+'"></select>'); 
    } 

    var options = $('#sample').html(); 
    $('#container select').html(options); 
} 

演示：Fiddle

Answer 2

window.appendSelects = function(n) { 
    $('#container').html(''); 
    for (var i = 0; i < n; i++) { 
     $('#container').append('<select id="'+i+'"></select>'); 
    } 

    var options = $('#sample').html();// get by id because here we get option html 
    $('#container select').html(options); 
} 

看到demo

Answer 3

而不是在聲明的點使用clone()的變量options，它只導致一個組被克隆，然後在新創建

var options = $('#sample option'); 
$('#container select').each(function(){ 
    $(this).append(options.clone()); // clone here... 
    console.log('appended options to '+$(this).attr('id')); 
}); 

Updated fiddle