0

Tengo tres desplegables dependientes uno de otro. Cuando selecciono el país, se cargan las provincias y cuando se cargan las provincias, se carga el desplegable de las ciudades. Para que se recarguen uso una variable global, para saber si se seleccionó el país, pero no me esta cargando las provincias.

let elegido;
let proElegida;
$(document).ready(function () {
    $.getJSON("datos.json", function (resultado) {
        $("#pais").append("<option value=''>--Seleccione País--</option>");
        $("#provincia").empty();
        $("#ciudad").empty();
        for (let i = 0; i < resultado.Paises.length; i++) {
            $("#pais").append("<option id='" + resultado.Paises[i] + "' value='" + i +
                "'>" + resultado.Paises[i] + "</option>");
        }
        $("#pais").change(eligeProvincia);
        //$("#pais").change(cargarProvincias);
        $("#enviar").click(function () {
            if ($("#pais").val() === "" || $("#provincia").val() === "" || $("#ciudad").val() === "") {
                $("#icono").show();
                $("#icono").delay(3000);
                $("#icono").fadeOut();
                return false;
            }
            return true;
        });
    });
});

function eligeProvincia() {
    $("#provincia").empty();
    $("#ciudad").empty();
    elegido = $("#pais").children("option:selected").val();
    if (elegido !== "") {
        $("#provincia").append("<option value=''>--Seleccione una provincia--</option>");
        for (let j = 0; j < resultado.Provincias.length; j++) {
            $("#provincia").append("<option id='" + resultado.Provincias[elegido][j] + "' value='" + j +
                "'>" + resultado.Provincias[elegido][j] + "</option>");
        }
    } else {
        $("#icono").show();
        $("#icono").delay(3000);
        $("#icono").fadeOut();
        return false;
    }
    $("#provincia").change(function(){
        $("#ciudad").empty();
        proElegida = $("#provincia").children("option:selected").val();
        if (elegido !== "" && proElegida !== ""){
            $("#ciudad").append("<option value=''>--Seleccione una ciudad--</option>");
            for(let k=0; k<resultado.Ciudades.length; k++){
                $("#ciudad").append("<option id='" + resultado.Ciudades[elegido][proElegida][k] + "' value='" + k
                + "'>" + resultado.Ciudades[elegido][proElegida][k] + "</option>");
            }
        }else {
            $("#icono").show();
            $("#icono").delay(3000);
            $("#icono").fadeOut();
            return false;
        }
    });
};
2
  • Hola Mar buen día, te paso el enlace de una pagina, esta explicado como utilizar combobox dependientes. stackoverflow.com/questions/18351921/…
    – waimaku
    el 6 jun. 2019 a las 14:12
  • Gracias, como lo explican en el enlace, ya lo hace y funciona bien. Yo lo que quiero es crear la función, que será llamada por el evento change del primer desplegable, fuera de la función principal.
    – Mar Maz
    el 7 jun. 2019 a las 13:36

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.