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，而只会导致克隆一个集合，然后在新创建的select元素之间移动，而是需要附加到选择时clone()：

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

Updated fiddle

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

3 个答案: