动态为多个Select元素添加Optgroup时首个Select无内容的问题求助

你遇到的这个问题核心在于DOM元素的唯一性——一个DOM节点同一时间只能属于一个父元素。当你执行from_el.add(og)时，这个og（optgroup元素）被挂载到了from_selector下；紧接着执行to_el.add(og)，浏览器会自动把这个og从from_selector的子节点中移除，再添加到to_selector里。这就是为什么最后只有第二个select有内容，第一个被清空了。

既然不能复用同一个DOM元素，我们需要为每个select创建独立的optgroup副本。可以使用DOM元素的cloneNode(true)方法，true表示深度克隆（会把optgroup下的所有option子元素也一起克隆）。

修改你的添加逻辑如下：

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_selector添加克隆的optgroup
  from_el.add(og.cloneNode(true));
  // 为to_selector添加克隆的optgroup
  to_el.add(og.cloneNode(true));
}

这样两个select都会拥有各自独立的optgroup和option元素，不会出现互相覆盖的问题。

另外补充一点：因为你使用了Select2组件，在添加完DOM元素后，记得重新初始化Select2以确保组件能正确识别新选项。如果用jQuery初始化的话，可以这样做：

$(from_el).select2('destroy').select2();
$(to_el).select2('destroy').select2();

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