0

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
    <script src="functions.js"></script>
  </body>
</html>

4
  • 1
    una vez modificado el valor, creas y disparas el evento "change" const event = new Event('change'); elem.dispatchEvent(event); el 5 ene. 2023 a las 0:22
  • de hecho antes de formular la pregunta he probado eso que compartes y lo he colocado en diferentes lugares pero me genera un bucle infinito, me podrías indicar específicamente en que linea debería ir para que no se genere dicho bucle?... Por cierto el evento 'change' no se deberia disparar cuando un select es cambiado tanto por interaccion del usuario como por programacion?. @alo Malbarez
    – Ultimatux
    el 5 ene. 2023 a las 0:52
  • 1
    si y no, según veo estas reemplazando las options en vez de cambiarlas, eso afectaría el algoritmo de "selectedness" html.spec.whatwg.org/multipage/… con lo cual no sabe que cambió. el evento habría que dispararlo al terminar de modificar el select fuera del foreach, en código puede que genere el loop si pierde la referencia, podrias implementarlo como callback desde el que llama al "modificador de options" o armar una promesa que encadene el evento cuando resuelve. probá enviar el evento desde la consola a ver que pasa "selectbloque .dispatchEvent" el 5 ene. 2023 a las 1:24
  • btw en navegadores mas actuales muchos eventos requieren interacción previa del usuario con el elemento asi que cambiar programaticamente a veces necesita ese extra send el 5 ene. 2023 a las 1:25

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.