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

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

演示：小提琴

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

看演示

Answer 3

而不是clone()在声明options变量时使用，这只会导致一组被克隆，然后在新创建的select元素之间移动，您需要clone()在附加到选择时：

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

更新的小提琴