Quiero agregar una nueva opción a todos los menús desplegables existentes en mi página. Obtengo todos los menús usando querySelectorAll y recorro cada uno y agrego la opción.
// creating my option
let opt;
opt = document.createElement('option');
opt.value = 10;
opt.text = 'hello';
// looping and adding the option
document.querySelectorAll('select').forEach(ele => {
ele.add(opt);
});
Sin embargo, el problema es que solo se agrega esta opción a la última lista desplegable. Todas las selecciones anteriores no se ven afectadas. ¿Por qué? Sin embargo, si creo la nueva opción dentro del bucle como se muestra a continuación, todas las listas de selección se actualizan según lo previsto.
document.querySelectorAll('select').forEach(ele => {
let opt;
opt = document.createElement('option');
opt.value = 10;
opt.text = 'hello';
ele.add(opt);
});
¿Por qué es como este? Por favor ayuda.
Aunque esta pregunta ya tiene respuestas aquí (que necesita un nuevo elemento para cada complemento):
bucle forEach solo creando el último elemento DOM
¿Por qué cada ciclo () cambia solo el último elemento?
appendChild en for loop solo agrega 1 hijo
Javascript Loop: elemento de inserción que solo funciona en la última iteración
Publicaré mi sugerencia ya que es más simple que las otras.
let opt = new Option('10', 'hello');
const sels = document.querySelectorAll("select")
.forEach(s => s.appendChild(opt.cloneNode(true)));
<select name="one">
<option value="1">One</option>
</select>
<select name="two">
<option value="1">Two</option>
</select>
<select name="three">
<option value="1">Three</option>
</select>
<select name="four">
<option value="1">Four</option>
</select>
Su código no funcionó porque document.createElement("option") se llamó solo una vez y, posteriormente, el mismo elemento se reasignó a una serie de elementos select . Después de la primera vez, la misma opción simplemente se movió a la siguiente selección y no se copió.
En contraste con eso, la siguiente secuencia de comandos utiliza el método de elementos .insertAdjacentHTML() que crea nuevos elementos sobre la marcha y los agrega en el punto especificado.
document.querySelector("button").onclick=ev=>{
document.querySelectorAll("select").forEach(s=>s.insertAdjacentHTML("beforeend",'<option value="10">hello</option>'));
}
<select name="one"><option value="1">Start</option></select>
<select name="two"><option value="1">as you</option></select>
<select name="three"><option value="1">mean to</option></select>
<select name="four"><option value="1">go on!</option></select>
<br><button>add an option</button>