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>