如何将一个select/option列表完整复制到另一个select/option列表？

问题原因 #

你这段代码的问题出在**appendChild的行为和正序遍历的逻辑冲突**：

• appendChild会把元素从原DOM节点中移除，再添加到目标节点，所以每次执行toSelect.appendChild(fromSelect.options[i])，fromSelect的选项数量都会减少1。
• 你用正序for循环遍历，i每次递增1，但原选项列表的长度在不断缩短，导致循环会跳过一半的选项（比如i=0移走第一个选项后，原列表长度从7变6，i=1时取的是原列表的第二个选项，也就是现在的第一个，移走后长度变5，i=2取现在的第二个（原第三个），以此类推，最终只移走了奇数位的选项）。

解决方案 #

根据你的需求（是复制还是移动选项），有几种处理方式：

1. 复制选项（保留原select的所有选项）

如果需要原select的选项不变，只是把选项复制到新select里，用cloneNode(true)复制每个选项元素：

var fromSelect = document.getElementById("Sel1");
var toSelect = document.getElementById("Sel2");
toSelect.innerHTML = "";
for (var i = 0; i < fromSelect.options.length; i++) {
  // 深拷贝选项元素，原select的选项不会被移除
  toSelect.appendChild(fromSelect.options[i].cloneNode(true));
}

2. 移动所有选项（把原select的选项全部转移到新select）

如果要清空原select，把所有选项移到新select，用倒序循环遍历原选项：

var fromSelect = document.getElementById("Sel1");
var toSelect = document.getElementById("Sel2");
toSelect.innerHTML = "";
// 从最后一个选项开始遍历，避免原列表长度变化影响索引
for (var i = fromSelect.options.length - 1; i >= 0; i--) {
  toSelect.appendChild(fromSelect.options[i]);
}

或者把原选项转成静态数组后遍历，这样不受DOM变化影响：

var fromSelect = document.getElementById("Sel1");
var toSelect = document.getElementById("Sel2");
toSelect.innerHTML = "";
// 将options集合转为数组，遍历静态数组
Array.from(fromSelect.options).forEach(option => {
  toSelect.appendChild(option);
});

内容的提问来源于stack exchange，提问作者Bill