select 元素的动态设置选项会跳过第一个元素

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 个 select 元素，如下所示：

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）花费的时间要长得多。我也试过将这些 select or 放在数组中并迭代它们，总是最后一个 select 被填充，而第一个 select 保持空。

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

select 元素的动态设置选项会跳过第一个元素

Dynamically setting options for a select elements skips first element

javascript

jquery-select2