Javascript 为什么不'；我的选项不会附加到所有选择中

我想生成任意数量的选项，并将以前准备好的选项附加到所有选项中。但我的选项只附加到最后一个选择，无论有多少个选择

控制台报告它确实遍历了所有选择

HTML:

数量：
一
二
三

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'));
});

$（'#container'）.html（''）；
对于（变量i=0；i

Fiddle位于此处：

---

我哪里出错了

问题是您将同一个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);
}

window.appendSelects=函数（n）{
$（'#container'）.html（''）；
对于（变量i=0；i

---

演示：

问题是您将同一个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);
}

window.appendSelects=函数（n）{
$（'#container'）.html（''）；
对于（变量i=0；i

演示：

window.appendSelects=函数（n）{
$（'#container'）.html（''）；
对于（变量i=0；i

参见

window.appendSelects=function（n）{
$（'#container'）.html（''）；
对于（变量i=0；i

---

请参见

在声明

选项

变量时，不要使用

克隆（）

，该变量只会导致克隆一个集合，然后在新创建的

选择

元素之间移动，在附加到选择时，您需要

克隆（）

：

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

---

在声明

选项时使用
clone（）
变量，这只会导致克隆一个集合，然后在新创建的
选择
元素之间移动，而不是使用
clone（）
，在附加到选择时需要
clone（）
：

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

append将移动您的元素append将移动您的元素