为什么总是只附加到最后一个元素

why always only append to last element?

本文关键字：最后一个 元素 为什么      更新时间：2023-09-26

下面是我的代码....

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是一个 Object 数组，如下所示： 

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

在我的页面上，只有BTBank3正确附加了子项，为什么？

因为您一直传递相同的元素 3 次，所以该元素从一个父元素移动到另一个父元素。

每次都需要传递一个新实例，可以使用 cloneNode（） 方法创建对象的克隆。

由于您需要 3 个实例，因此您可以克隆对象两次，然后将对象传递给第 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>

相关文章：