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

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

在我的网页上，只有 BTBank3 正确追加儿童，为什么？

Answer 1

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

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

由于您需要3个实例，因此可以将对象克隆两次，然后将对象传递给第三个调用，如

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: