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ón:</b>
<select id="slcSecciones">
<option selected>Seleccione una opcion...</option>
</select>
</div>
<div>
<b>Categoría:</b>
<select id="slcCategorias">
<option selected>Seleccione una opcion...</option>
</select>
</div>