Skip to main content
Identando con espacios para que sea más legible
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92
window.addEventListener('load', function () {

    //valor del anno en en select
    var selectAnno = document.getElementById("annos");
    
    let annoSeleccionado="";
annoSeleccionado = "";
  selectAnno.addEventListener('change', function (annoSeleccionado) {
        
        annoSeleccionado = parseInt(this.options[selectAnno.selectedIndex].value);
        console.log(annoSeleccionado);
    });
    
    
    //selecciono el menu lateral donde se dibujan los campos relativos
    var menuLateral=menuLateral = document.querySelector('#lateral');
    var encabezado = document.querySelector('#encabezado');
    
    //selecciono el select
    var valorseleccionado = document.getElementById('select');

    //tomo el valor del select cuando cambie y muesto los datos de interes
    valorseleccionado.addEventListener('change', function (annoSeleccionado) {
    var opcion = this.options[select.selectedIndex];

    if (opcion.value == 1) {

      funcionAjax(annoSeleccionado)

      encabezado.innerHTML = `
        <th>Anno gestione</th>
        <th>Capitolo</th>
        <th>Importo</th>
        <th>% aggio</th>
        <th>% iva su aggio</th>`;

      menuLateral.innerHTML = `
        <div class='elementos'>
            <label for='capitolo'>Capitolo</label>
            <input name='capitolo' id="buscar" type="number">
        </div>
        <div class='elementos'>
          <label for='descrizione'>Descrizione</label>
          <input name="descrizione"  type="text">
        </div>`
    }
  });
<div>
        <div class='querys'>
            <div class='elementos'>
            <label for="SelAnno">Anno Gestion</label>
            <select name='SelAnno' id='annos'>
        <option>2019</option>
        <option>2018</option>
        <option>2017</option>
            </select>
        </div>
    </div>
</div>      
<div>
    <div id='querys'>
            <div class='elementos'>
            <label for='pruebas'>Tipo de consulta</label>
            <select name="pruebas" id="select">
                <option>Selecciona</option>
                <option value="1">Prevision</option>
                <option value="2">Otros datos</option>
            </select> 
            </div>
            <div class='menulateral ' id='lateral' >
                
            </div>id='lateral'>
        </div>
    </div>

    <br>
    <br>
    <div id="contenedor-tabla">
    <table border="1" id="tabla">
        <thead>
            <tr id="encabezado">
        
            </tr>
        </thead>
        <tbody id="table-data">

    </table>
    </div>

</div>


<div id="container" style="height: 400px;">

</div>
window.addEventListener('load', function(){

    //valor del anno en en select
    var selectAnno = document.getElementById("annos");
    
    let annoSeleccionado="";
    selectAnno.addEventListener('change', function(annoSeleccionado){
        
        annoSeleccionado = parseInt(this.options[selectAnno.selectedIndex].value);
        console.log(annoSeleccionado);
    });
    
    
    //selecciono el menu lateral donde se dibujan los campos relativos
    var menuLateral= document.querySelector('#lateral');
    var encabezado = document.querySelector('#encabezado');
    
    //selecciono el select
    var valorseleccionado = document.getElementById('select');

    //tomo el valor del select cuando cambie y muesto los datos de interes
    valorseleccionado.addEventListener('change', function(annoSeleccionado){
  var opcion = this.options[select.selectedIndex];

  if(opcion.value == 1){

    funcionAjax(annoSeleccionado)

    encabezado.innerHTML = `
        <th>Anno gestione</th>
        <th>Capitolo</th>
        <th>Importo</th>
        <th>% aggio</th>
        <th>% iva su aggio</th>`;

    menuLateral.innerHTML = `
        <div class='elementos'>
            <label for='capitolo'>Capitolo</label>
            <input name='capitolo' id="buscar" type="number">
        </div>
        <div class='elementos'>
          <label for='descrizione'>Descrizione</label>
          <input name="descrizione"  type="text">
        </div>`
  }
});
<div>
        <div class='querys'>
            <div class='elementos'>
            <label for="SelAnno">Anno Gestion</label>
            <select name='SelAnno' id='annos'>
        <option>2019</option>
        <option>2018</option>
        <option>2017</option>
            </select>
        </div>
    </div>
</div>      
<div>
    <div id='querys'>
            <div class='elementos'>
            <label for='pruebas'>Tipo de consulta</label>
            <select name="pruebas" id="select">
                <option>Selecciona</option>
                <option value="1">Prevision</option>
                <option value="2">Otros datos</option>
            </select> 
            </div>
            <div class='menulateral ' id='lateral' >
                
            </div>
        </div>
    </div>

    <br>
    <br>
    <div id="contenedor-tabla">
    <table border="1" id="tabla">
        <thead>
            <tr id="encabezado">
        
            </tr>
        </thead>
        <tbody id="table-data">

    </table>
    </div>

</div>


<div id="container" style="height: 400px;">

</div>
window.addEventListener('load', function () {

  //valor del anno en en select
  var selectAnno = document.getElementById("annos");

  let annoSeleccionado = "";
  selectAnno.addEventListener('change', function (annoSeleccionado) {

    annoSeleccionado = parseInt(this.options[selectAnno.selectedIndex].value);
    console.log(annoSeleccionado);
  });


  //selecciono el menu lateral donde se dibujan los campos relativos
  var menuLateral = document.querySelector('#lateral');
  var encabezado = document.querySelector('#encabezado');

  //selecciono el select
  var valorseleccionado = document.getElementById('select');

  //tomo el valor del select cuando cambie y muesto los datos de interes
  valorseleccionado.addEventListener('change', function (annoSeleccionado) {
    var opcion = this.options[select.selectedIndex];

    if (opcion.value == 1) {

      funcionAjax(annoSeleccionado)

      encabezado.innerHTML = `
    <th>Anno gestione</th>
    <th>Capitolo</th>
    <th>Importo</th>
    <th>% aggio</th>
    <th>% iva su aggio</th>`;

      menuLateral.innerHTML = `
    <div class='elementos'>
        <label for='capitolo'>Capitolo</label>
        <input name='capitolo' id="buscar" type="number">
    </div>
    <div class='elementos'>
        <label for='descrizione'>Descrizione</label>
        <input name="descrizione"  type="text">
    </div>`
    }
  });
<div>
  <div class='querys'>
    <div class='elementos'>
      <label for="SelAnno">Anno Gestion</label>
      <select name='SelAnno' id='annos'>
        <option>2019</option>
        <option>2018</option>
        <option>2017</option>
      </select>
    </div>
  </div>
</div>
<div>
  <div id='querys'>
    <div class='elementos'>
      <label for='pruebas'>Tipo de consulta</label>
      <select name="pruebas" id="select">
        <option>Selecciona</option>
        <option value="1">Prevision</option>
        <option value="2">Otros datos</option>
      </select>
    </div>
    <div class='menulateral ' id='lateral'>

    </div>
  </div>
</div>
Origen Enlace
RazerJs
  • 2.3k
  • 2
  • 18
  • 41

Como utilizar valores de una funcion de callback dentro de otra funcion de callback?

Tengo dos select en mi HTML uno del que tomo un anno y otro que en dependencia de la seleccion hago una determinada consulta ajax... para tomar los datos del los selects utilice 2 eventListeners uno que se ejecuta cuando cambio las selecciones.. Quiero utilizar el valor del anno que selecciono como parametro en la funcion que hace la llamada ajax(en la parte de if(opcion.value == 1){** contenido**} cuando selecciono la opcion del segundo select ), pero eh estado probando cosas y no puedo pasar el valor del anno de las funciones de una funcion de callback a otra... de hecho cuando lo paso como parametro como en el ejemplo me devuelve lo siguiente..

Event {isTrusted: true, type: "change", target: select#select, currentTarget: select#select, eventPhase: 2, …}

window.addEventListener('load', function(){

    //valor del anno en en select
    var selectAnno = document.getElementById("annos");
    
    let annoSeleccionado="";
    selectAnno.addEventListener('change', function(annoSeleccionado){
        
        annoSeleccionado = parseInt(this.options[selectAnno.selectedIndex].value);
        console.log(annoSeleccionado);
    });
    
    
    //selecciono el menu lateral donde se dibujan los campos relativos
    var menuLateral= document.querySelector('#lateral');
    var encabezado = document.querySelector('#encabezado');
    
    //selecciono el select
    var valorseleccionado = document.getElementById('select');

    //tomo el valor del select cuando cambie y muesto los datos de interes
    valorseleccionado.addEventListener('change', function(annoSeleccionado){
  var opcion = this.options[select.selectedIndex];

  if(opcion.value == 1){

    funcionAjax(annoSeleccionado)

    encabezado.innerHTML = `
        <th>Anno gestione</th>
        <th>Capitolo</th>
        <th>Importo</th>
        <th>% aggio</th>
        <th>% iva su aggio</th>`;

    menuLateral.innerHTML = `
        <div class='elementos'>
            <label for='capitolo'>Capitolo</label>
            <input name='capitolo' id="buscar" type="number">
        </div>
        <div class='elementos'>
          <label for='descrizione'>Descrizione</label>
          <input name="descrizione"  type="text">
        </div>`
  }
});
<div>
        <div class='querys'>
            <div class='elementos'>
            <label for="SelAnno">Anno Gestion</label>
            <select name='SelAnno' id='annos'>
        <option>2019</option>
        <option>2018</option>
        <option>2017</option>
            </select>
        </div>
    </div>
</div>      
<div>
    <div id='querys'>
            <div class='elementos'>
            <label for='pruebas'>Tipo de consulta</label>
            <select name="pruebas" id="select">
                <option>Selecciona</option>
                <option value="1">Prevision</option>
                <option value="2">Otros datos</option>
            </select> 
            </div>
            <div class='menulateral ' id='lateral' >
                
            </div>
        </div>
    </div>

    <br>
    <br>
    <div id="contenedor-tabla">
    <table border="1" id="tabla">
        <thead>
            <tr id="encabezado">
        
            </tr>
        </thead>
        <tbody id="table-data">

    </table>
    </div>

</div>


<div id="container" style="height: 400px;">

</div>