動態添加的選項消失，如果多次添加

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