0

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. Selecciono Francia y me muestra sus provincias Despues selecciono China y me muestra sus provincias junto con las de Francia. Selecciono China y me muestra sus provincias junto con las de Francia

1 respuesta 1

2

Tendrías que mover el while que borra los anteriores resultados a cada vez que se selecciona un nuevo país:

selectPaises.addEventListener("change", function() {
    let selectedOption = this.options[selectPaises.selectedIndex];
    while (selectProvincias.firstChild) {
        selectProvincias.removeChild(selectProvincias.firstChild);
    }
    series()
        .then((data) => {
            data.data.map((paises) => {
                if(paises['Country/Region'] == selectedOption.text) {
                    if (paises['Province/State'] == "") {
                        selectProvincias.setAttribute("disabled", "");
                    } else {
                        ...

O justo al inicio del then(), antes del map, si quieres que se borren al tener los resultados.

El problema que puedes tener si lo quieres hacer totalmente asíncrono a la ejecución de series() será lo que pase si llegan los nuevos resultados y aún no se han eliminado todos los anteriores. Tendrías que buscar como controlarlo. Es más fiable así.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.