1

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>

1
  • lo que he hecho hasta ahora no es muy optimo agrege un input hidden y agregue el valor del anno en una funcion y desde la otro tomo el valor de este campo pero esta solucion no me gusta ni un poco...
    – RazerJs
    Commented el 3 sept. 2019 a las 10:51

1 respuesta 1

1

Las funciones callback de los eventos reciben como parámetro el evento en sí (por eso ves un objeto de la clase Event). Pero puedes simplemente usar una clausura:

window.addEventListener('load', function () {
  //Declaramos la variable global
  let annoSeleccionado = "";
  //valor del anno en en select
  const selectAnno = document.getElementById("annos");

  selectAnno.addEventListener('change', function () {
    //podemos acceder a la variable de la función aquí, creando una clausura
    annoSeleccionado = parseInt(this.options[selectAnno.selectedIndex].value);
    console.log('Hemos seleccionado el año', annoSeleccionado);
  });

  //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 () {
    const opcion = this.options[select.selectedIndex].value;
    //de nuevo podemos acceder a la variable sin problemas
    console.log('Se ha seleccionado la combinación', annoSeleccionado,'y', opcion);
    //Aquí podríamos llamar a otra función, pasándole los parámetros
    //funcionAjax(annoSeleccionado,opcion);
  });
  
});
<div>
  <div class='querys'>
    <div class='elementos'>
      <label for="SelAnno">Anno Gestion</label>
      <select name='SelAnno' id='annos'>
      <option value="-1">Selecciona Año</option>
        <option value="2019">2019</option>
        <option value="2018">2018</option>
        <option value="2017">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>

No conocemos exactamente el uso que le quieres dar a tus funciones callback, pero existen otras soluciones un poco más complejas:

Usando bind() puedes añadir parámetros previos a una función:

function prueba(uno,dos) {
  console.log('He recibido los parámetros',uno,'y',dos.constructor);
}

let callback = prueba.bind(null,'Hola');

document.querySelector('button').addEventListener('click',callback);
<button>Click<button>

O puedes puedes tener una función de mayor orden para generar una clausura previa:

function generaCallback(uno) {

  return function(dos) {
    console.log(uno, dos);
  }
}

const callback = generaCallback('hola');

callback('Mundo');

3
  • He añadido otras posibles formas de solucionar el problema, por si te interesa Commented el 3 sept. 2019 a las 12:01
  • Gracias @Pablo Lozano no estoy claro aun de como funciona pero es exactamente como dices
    – RazerJs
    Commented el 3 sept. 2019 a las 12:04
  • Vale muchas gracias estoy viendo las otras posibles soliciones :)
    – RazerJs
    Commented el 3 sept. 2019 a las 12:06

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.