爲什麼總是隻追加到最後一個元素？

Question

下面是我的代碼....

var BankDescriptions = data.GetResult.map(function(item) { 

     var Bank1 = document.getElementById("BTBank1"); 
     var Bank2 = document.getElementById("BTBank2"); 
     var Bank3 = document.getElementById("BTBank3"); 
     var Bankopt = document.createElement('option'); 
     Bankopt.value = item.BankNo; 
     Bankopt.innerHTML = item.BankName; 
     Bank1.appendChild(Bankopt); 
     BTBank2.appendChild(Bankopt); 
     BTBank3.appendChild(Bankopt); 
}); 

data.GetResult是一個對象數組，如：

[{BankName: "test1", BankNo: "1"},{BankName: "test2", BankNo: "2"}] 

在我的網頁，只有BTBank3正確追加孩子，爲什麼呢？

Answer 1

因爲所有3次傳遞相同的元素，所以元素從一個父元素移到另一個元素。

您需要每次都傳遞一個新實例，您可以使用cloneNode()方法創建對象的克隆。

由於需要3個實例，可以克隆的對象兩次，然後傳遞對象到第三個呼叫像

var data = { 
 
    GetResult: [{ 
 
    BankName: "test1", 
 
    BankNo: "1" 
 
    }, { 
 
    BankName: "test2", 
 
    BankNo: "2" 
 
    }] 
 
} 
 

 
var Bank1 = document.getElementById("BTBank1"); 
 
var Bank2 = document.getElementById("BTBank2"); 
 
var Bank3 = document.getElementById("BTBank3"); 
 
var BankDescriptions = data.GetResult.forEach(function(item) { 
 
    var Bankopt = new Option(item.BankName, item.BankNo); 
 
    Bank1.appendChild(Bankopt.cloneNode(true)); 
 
    Bank2.appendChild(Bankopt.cloneNode(true)); 
 
    Bank3.appendChild(Bankopt); 
 
});

<select id="BTBank1"></select> 
 
<select id="BTBank2"></select> 
 
<select id="BTBank3"></select>