0

Tengo 5 select en cascada, que todos dependen del que esta a nivel superior.

Select1

Select2

Select3

Select4

Select5

Cuando llego al punto que los tengo todos cargados, quiero que al cambiar select1, se vacien todos los anteriores. Como tambien cuando cambio select2, que se vacien select3, selec4, select5, menos select1.

Como podria hacer? Los select los cargo mediante ajax, que traigo los datos dinamicamente desde mi base de datos.

Paso mi html con los select, y paso un par de ajax, porque si los paso todos se hace largo, igualmente son similares los 5 ajax. Los ajax que paso son los de Select1 y select2, obviamente select2 depende de select1.

//obtengo las secciones
function DesplegarSecc() {
    $("#slcSecciones").html('<option selected disabled>Seleccione una opcion...</option>');
    var dir = "CargoSeccion";
    return $.ajax({
        type: 'GET',
        url: api + dir,
        success: function(seccion) {
            var secc = seccion;
            for (var i = 0; i < secc.length; i++) {
                $("#slcSecciones").append("<option selected='" + secc[i] + "'>" + secc[i] + "</option>");
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log(xhr);
            console.log(textStatus);
            console.log(errorThrown);
        }

    });
}


//obtengo las categorias
function DesplegarCatXSecc(NombreSeccion) {
    $("#slcCategorias").html('<option selected disabled>Seleccione una opcion...</option>');
    var dir = "CargoCategoria";
    $.ajax({
        type: 'GET',
        url: api + dir + "?NombreSeccion=" + NombreSeccion,
        success: function(categorias) {
            var cat = categorias;
            for (var i = 0; i < cat.length; i++) {
                // if(idSeccion == cat[i].idSeccion)
                $("#slcCategorias").append("<option value='" + cat[i] + "' >" + cat[i] + "</option>")
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            console.log(xhr);
            console.log(textStatus);
            console.log(errorThrown);
        }

    });
}
            <!-- SELECT DINAMICO -->
            <div>
                <b>Secci&oacute;n:</b> &nbsp;
                <select id="slcSecciones">
                    <option selected>Seleccione una opcion...</option> 
                </select>
            </div>
            &nbsp; &nbsp;
            <div>
                <b>Categor&iacute;a:</b> &nbsp;
                <select id="slcCategorias">
                        <option selected>Seleccione una opcion...</option>
                </select>
            </div>
            &nbsp; &nbsp;

2
  • Haz resuelto el problema de la pregunta anterior? Commented el 30 jul. 2019 a las 20:43
  • No tampoco he podido
    – tato8vio
    Commented el 31 jul. 2019 a las 11:52

1 respuesta 1

0

Hola debes de concatenar y separar por una coma los selectores que quieres limpiar al inicio de cada función que carga el contenido, por ejemplo:

function DesplegarSecc() {
        $("#slcSecciones, #slcCategorias").html('<option selected disabled>Seleccione una opcion...</option>');
        var dir = "CargoSeccion";
        return $.ajax({
            type: 'GET',
            url: api + dir,
            success: function(seccion) {
                var secc = seccion;
                for (var i = 0; i < secc.length; i++) {
                    $("#slcSecciones").append("<option selected='" + secc[i] + "'>" + secc[i] + "</option>");
                }
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(xhr);
                console.log(textStatus);
                console.log(errorThrown);
            }

        });
    }
3
  • Gracias por la respuesta pero no he podido solucionar mi problema, lo que yo quiero es dejar vacio los select que dependen de otro, al tenerlos todos cargados y cambiar por ej el del medio, y los del medio en adelante que se vacien
    – tato8vio
    Commented el 31 jul. 2019 a las 11:47
  • Imaginate que cargue mis 5 select, y al final decido cambiar algo del select1, la accion que quiero que haga es que vacie los select que vienen por debajo, osea , selec2, select3, select4 y select5, el unico que tomaria valor a cambiar el select1 seria select2, que depende estrictamente de el
    – tato8vio
    Commented el 31 jul. 2019 a las 11:55
  • Es el mismo principio que te comento basado en un evento onchange (si es que haces la llamada ajax para llenar los selectores, cada que cambias uno). Si llenas todo desde un principio, no te funcionará. Pero puedes detallar más como es que disparas las funciones para comprender mejor el contexto. Commented el 31 jul. 2019 a las 17:18

Tu Respuesta

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

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