动态添加的选项消失，如果多次添加

Question

我刚想出了一个奇怪的故障。在我看来，这是一个错误。我想听听你的想法。

不久，我将在这里描述的问题：

可以说，我需要3个选择使用相同的选项，我在HTML创建他们是这样的：

<select id="x1" class="A"></select> 
    <select id="x2" class="A"></select> 

    <select id="y1" class="B"></select> 

然后我想填充他们与选择使用jQuery。我不喜欢这样：

var options = []; 
for(var i=0; i<5; i++){ 
    options.push($("<option value='" + i + "'>" + i + "</option>")); 
} 

$(".A").append(options); 
$(".B").append(options); 

有2个元素A类并用B类在本例中1个元素。调用$(".A").append(options)后，它按预期完成所有工作 - 它将这些选项添加到类A中进行选择。但是，在调用$(".B").append(options)之后，它将这些选项添加到类B的元素，但类的最后一个元素的选项消失了！这似乎很奇怪！

的影响是一样的，如果我加入他们这样的：

for(var i=0; i<5; i++){ 
    var option = $("<option value='" + i + "'>" + i + "</option>"); 
    $(".A").append(option); 
    $(".B").append(option); 
} 

JSBin example

我结束了使用$(".A, .B").append(options)添加到所有选择的选项，但是这并看起来不正确。

你的想法是什么？

Answer 1

问题是因为options始终引用同一组DOME元素，所以您的代码实际上是将选项添加到第一个select，然后立即将它们转移到另一个。如果你要复制的元素，你需要clone()他们：

$(".A").append(options); 
$(".B").append(options.clone()); 

您使用的是$(".A, .B").append(options)完全合法的，在我看来，一个更好的解决方案。

Working Demo

或者，你可以改变option生成逻辑来创建，然后可以在任何地方附加您需要一个字符串：

var options = ''; 
for(var i = 0; i < 5; i++){ 
    options += '<option value="' + i + '">' + i + '</option>'; 
} 

$(".A").append(options); 
$(".B").append(options);