为选定元素动态设置选项会跳过第一个元素

Question

我动态构建了一个选项数组，该数组分为两个选项组。这些选项组存储在名为ogs的javascript数组中。相同的代码如下：

var ogs = [];
for (optGroup in optionsList) {
var og = document.createElement('optgroup');
og.label = optGroup;
var ops = optionsList[optGroup];
for (op in ops) {
var o = document.createElement('option');
o.value = op;
o.text = ops[op];
og.appendChild(o);
}
ogs.push(og);
}

现在，我尝试将这些选项添加到2个选择元素中，如下所示：

var from_el = document.getElementById('from_selector'), to_el = document.getElementById('to_selector');
for (i = 0; i < ogs.length; ++i) {
var og = ogs[i];
from_el.add(og);
to_el.add(og);
}

但是，在脚本的末尾，只有to_selector填充了选项，而from_selector保持为空。我之所以填充这样的选项，是因为这两个select元素都使用select2，而任何其他方法(如innerHTML(都需要更长的时间。我还尝试过将这些选择器放在数组中并对它们进行迭代，总是填充最后一个选择，而第一个选择保持为空。

Answer 1

解决了这个问题。问题出现在以下几行：

from_el.add(og);
to_el.add(og);

当og被添加到to_el时，它正在从from_el分离。解决方案是将其替换为。

from_el.add(og);
to_el.add(og.cloneNode(true));