Estoy escribiendo una función en Javascript simple donde envío algunos valores a través de AJAX y, si arroja resultados, necesito eliminar todas las opciones de un selector y reemplazarlas con el conjunto que se devuelve.
HTML
<select id="mySelector"> ....JS
(async () => { .... const res = await fetch(url, { method: "POST", headers, body }); if (results.ok) { let myoptions = await results.text(); var myselectr = document.querySelector("#mySelector"); myselectr.options.length = 0; myselectr.append(myoptions); } })();Parece que elimina las opciones anteriores, pero solo en el primer cambio. Todos los intentos posteriores siguen agregando nuevos conjuntos de opciones.
¿Que me estoy perdiendo aqui?
Puedes hacer esto
(async () => { .... const res = await fetch(url, { method: "POST", headers, body }); if (results.ok) { let myoptions = await results.text(); var myselectr = document.querySelector("#mySelector"); myselectr.innerHTML = ""; // Updated myselectr.append(myoptions); } })();debe mantener las opciones actuales en la memoria (no en la interfaz de usuario). Cuando tiene opciones adicionales, agrega a currentOptions y luego representa la selección de IU con currentOptions nuevamente.