Tengo una etiqueta select
padre al que se le agregan etiquetas options
hijo cuando una API tiene provincias dependiendo del país, al momento de hacer un change se agregan las provincias de X país, en caso de que no tenga disponibles, el select borra todos sus options
hijos y se deshabilita el select
, pero si selecciono primero un país que si tiene provincias me los agregua al select y despues si vuelvo a seleccionar otro pais con provincias me los agrega con las del primer país.
Mi idea es hacer un while que me elimine todos los hijos actuales del select para despues agregar los options correctos, pero no logro hacer un while asincrono para limpie el select.
selectPaises.addEventListener("change", function() {
let selectedOption = this.options[selectPaises.selectedIndex];
series()
.then((data) => {
data.data.map((paises) => {
if(paises['Country/Region'] == selectedOption.text) {
if (paises['Province/State'] == "") {
while (selectProvincias.firstChild) {
selectProvincias.removeChild(selectProvincias.firstChild);
}
selectProvincias.setAttribute("disabled", "");
} else {
let opcion = document.createElement("option");
opcion.innerHTML = `${paises['Province/State']}`;
selectProvincias.appendChild(opcion);
selectProvincias.removeAttribute("disabled");
}
}
});
})
.catch((err) => console.error(err));
});
Primero selecciono Francia y me muestra sus provincias.
Despues selecciono China y me muestra sus provincias junto con las de Francia.