为什么我的选项不会附加到所有选择

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