He construido dinámicamente una matriz de opciones dividida en dos grupos de opciones. Estos grupos de opciones se almacenan en una matriz de javascript llamada ogs . El código para el mismo es el siguiente:

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

Ahora, estoy tratando de agregar estas opciones a 2 elementos seleccionados, como se muestra a continuación:

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

Sin embargo, al final de la secuencia de comandos, solo to_selector tiene las opciones completas, mientras que from_selector permanece vacío. La razón por la que estoy llenando las opciones de esta manera es porque estos dos elementos de selección usan select2, y cualquier otro método (como innerHTML ) está tomando mucho más tiempo. También intenté colocar estos selectores en una matriz e iterarlos, siempre se completa la última selección, mientras que la primera selección permanece vacía.