En el proyecto existe 3 select, al modificar la selección del primero #bloque
se dispara el el evento 'change'
vinculado a este, lo que debería generar que se modifique el segundo select
#dimension
que este a su vez tendría que disparar su evento 'change'
que luego modificaría el tercer select #indicador
, el caso es que esto no funciona, el evento 'change'
del select #indicador
solo se dispara cuando interactuo directamente seleccionando alguna opción, mas no cuando lo modifico mediante código... dejo el codigo html y javascript. Cabe resaltar que los datos para "rellenar" cada select los capturo de un archivo json, otra cosa a tener en cuenta que para el primer "rellenado" utilice una funcion exclusiva para eso cuando carga la pagina. paso el código a continuación.
Aclaración: La constante bdjson, lo coloque aqui para tener mayor contexto de como esta formado el archivo json del que hable anteriorme, ya que este es un archivo externo, el archivo es muy extenso así que solo deje un fragmento
const bdjson = [
{
"bloque":"Condiciones materiales",
"dimension":"Vivienda",
"indicador":"Calidad de los materiales - piso",
"encabezado":["Suficiente","Parcial","Insuficiente"],
"col":["pisosufi","pisopar","pisoinsu"]
},
{
"bloque":"Condiciones materiales",
"dimension":"Ingreso",
"indicador":"Mediana IPCF",
"encabezado":["Total","Mujeres","Varones"],
"col":["medianaipcfto","medianaipcfmu","medianaipcfva"]
},
{
"bloque":"Condiciones materiales",
"dimension":"Empleo",
"indicador":"Porcentaje de poblacion NI",
"encabezado":["Total","Mujeres","Varones"],
"col":["nito","nimu","niva"]
},
{
"bloque":"Condiciones materiales",
"dimension":"Empleo",
"indicador":"Brecha por sexo - Jovenes NI ",
"encabezado":["Brecha por sexo - Jovenes NI "],
"col":["sexni"]
},
{
"bloque":"Calidad de vida",
"dimension":"Educación y habilidades",
"indicador":"Brecha por sexo - Jovenes NI ",
"encabezado":["Brecha por sexo - Jovenes NI "],
"col":["sexni"]
},
{
"bloque":"Calidad de vida",
"dimension":"Salud",
"indicador":"Atencion sanitaria de calidad",
"encabezado":["Atencion sanitaria de calidad"],
"col":[""]
}
]
const selectbloque = document.querySelector('#bloque');
const selectdimen = document.querySelector('#dimension');
const selectindi = document.querySelector('#indicador');
document.addEventListener("DOMContentLoaded",function(){
let fil =['Condiciones materiales','Empleo','Tasa de desempleo'];
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "bd.json", true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let datos = JSON.parse(this.responseText);
const bloques = [...new Set(datos.map(datos => datos.bloque))];
const dimensiones = [...new Set(datos.filter(datos => datos.bloque === fil[0]).map(datos => datos['dimension']))];
//se filtra por todos los indicadores que tiene dimension= empleo para luego mapearlo en un nuevo array
const indicadores = [...new Set(datos.filter(datos => datos.dimension === fil[1]).map(datos => datos.indicador))];
selectbloque.innerHTML="";
selectdimen.innerHTML="";
selectindi.innerHTML="";
renderizando(bloques,selectbloque,fil[0]);
renderizando(dimensiones,selectdimen,fil[1]);
renderizando(indicadores,selectindi,fil[2]);
function renderizando(datos,selector,selected){
datos.forEach(function(valor){
//console.log(valor);
if(valor === selected){
selector.innerHTML+=`
<option value="${valor}" selected>${valor}</option>
`
}else{
selector.innerHTML+=`
<option value="${valor}">${valor}</option>
`
}
})
}
}
};
});
// -----CAMBIO DE VALORES DINAMICOS EN LOS SELECT-----
selectbloque.addEventListener('change',function(){
let valor = this.value;
let filtrar = 'bloque';
let mapear = 'dimension';
//console.log('aca iba algo',selectbloque);
xhr(valor,filtrar,mapear,selectdimen);
})
selectdimen.addEventListener('change',function(){
let valor = this.value;
let filtrar = 'dimension'
let mapear = 'indicador';
//console.log('aca iba algo',selectbloque);
console.log(valor,filtrar,mapear,selectindi);
xhr(valor,filtrar,mapear,selectindi);
})
function xhr(valor,filtrar,mapear,selector){
//filtar y valor = la primera variable indica que propiedad se filtrara y la segunda es la condicion para filtrar
//mapear = despues de filtrarse los datos con la variable filtar, se mapeara solamente la propiedad indicada en esta variable
const xhttp = new XMLHttpRequest();
xhttp.open("GET", "bd.json", true);
xhttp.send();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let datos = JSON.parse(this.responseText);
const resulfiltrado = [...new Set(datos.filter(datos => datos[filtrar] === valor).map(datos => datos[mapear]))];
selector.innerHTML=""
console.log('inicio xhr',resulfiltrado,valor,selector,'fin hxr')
renderizando(resulfiltrado,valor,selector);
}
};
}
function renderizando(datos,selected,selector){
console.log(datos,selected,selector);
datos.forEach(function(valor){
//console.log(valor);
if(valor === selected){
selector.innerHTML+=`
<option value="${valor}" selected>${valor}</option>
`
}else{
selector.innerHTML+=`
<option value="${valor}">${valor}</option>
`
}
})
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<br><br><br>
<select class="form-control form-control-sm" id="bloque"></select>
<br><br>
<select class="form-control form-control-sm" id="dimension"></select>
<br><br>
<select class="form-control form-control-sm" id="indicador"></select>
<br><br><br>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody id="res">
</tbody>
</table>
<p id="prueba"> </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="functions.js"></script>
</body>
</html>
const event = new Event('change'); elem.dispatchEvent(event);