7

tengo dos select funcionan con el evento onchange pero quiero que si vuelvo a seleccionar el mismo valor del segundo select me vuelva a ejecutar su funcion de callback... Ejemplo: si en el select consulta selecciono el valor "prevision" muestra el console.log con el texto del anno y el numero de la seleccion, pero al cambiar el anno y seleccionar nuevamente el valor no mostraria nada pq nada cambia en el segundo select... que evento puedo utilizar para esto, o que podria hacer... Gracias de antemano

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 () {

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

  //selecciono el select de valores
  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);
    
  });
  
});
<div>
    <div class='elementos'>
      <label for="SelAnno">Anno</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 class='elementos'>
      <label for='pruebas'>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>

2 respuestas 2

3

Puedes utilizar el concepto de "estado-efecto", haciendo que ambos eventos compartan un mismo efecto que modifique el estado y haga los operaciones que necesitas. Por ejemplo si seleccionas la secuencia 2019 ---> Otro dato; y puedes ver el mensaje "Se ha seleccionado la combinación 2019 y 2"; al seleccionar 2018, podrás ver el nuevo mensaje "Se ha seleccionado la combinación 2018 y 2", sin tener que volver a elegir la opción del segundo select, porque es recordada en el "estado". En tu caso si quiere ejecutar una función asíncrona podrás ejecutarla en el "efecto". En el ejemplo debajo utilizo setTimeout para simular las llamadas Ajax y ejecutar distintos efectos en función del año elegido.

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

  const effect = function (newData) {
    const newState = Object.assign({}, currentState, newData);
    
    if (JSON.stringify(newState) !== JSON.stringify(currentState)) {
       if (newState.select1 !== currentState.select1) {
          console.log(newState.select1);
       }
       currentState = newState;
       
       if (currentState.select2) {
         switch (currentState.select1) {
            case 2019:
              setTimeout(function() {
               console.log('[SIMUL1] Se ha seleccionado la combinación', currentState.select1,'y', currentState.select2);
              }, 500);
              break;
            default:
              setTimeout(function() {
               console.log('[SIMUL2] Se ha seleccionado la combinación', currentState.select1,'y', currentState.select2);
              }, 500);
         }
       }
    }
  };
  
  selectAnno.addEventListener('change', function () {
    effect({
      select1: parseInt(this.options[selectAnno.selectedIndex].value)
    });
  });

  //selecciono el select de valores
  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;
    effect({
      select2: opcion
    });
  });
});
<div>
    <div class='elementos'>
      <label for="SelAnno">Anno</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 class='elementos'>
      <label for='pruebas'>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>

3
  • 2
    wow gracias @Mauro Stepanoski es mas complicado de lo que pensaba pero hace lo q necesito y me sera util.. :)
    – RazerJs
    el 5 sep. 2019 a las 13:53
  • 1
    Me alegro que te sea de utilidad. Este concepto es similar el que utilizan bibliotecas como ReactJS para manejar el estado interno de los componentes. Para estados más complejos o compartidos entre muchos componentes incluso existen opciones como Redux, y formas de arquitecturar la solución de formas más complejas. el 5 sep. 2019 a las 14:14
  • 1
    si de hecho cuando empece a leerlo le encontre un parecido a react.. gracias de nuevo.. Saludos
    – RazerJs
    el 5 sep. 2019 a las 14:25
3

Prueba a usar click en vez de change.

selectAnno.addEventListener('click', function () {
   annoSeleccionado = parseInt(this.options[selectAnno.selectedIndex].value);
   console.log(annoSeleccionado);
});

Para más funciones sobre EventListener mirate el siguiente link:

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

5
  • 1
    gracias... si ya lo habia probado pero el problema de onclick es q me ejecutaria dos veces la funcion antes de seleccionar el mismo valor
    – RazerJs
    el 4 sep. 2019 a las 7:55
  • 1
    No estoy seguro que se pueda hacer (puedo equivocarme). Porque pides que si se hace dos clicks en un select se registre pero que si se hace click en el select ya puesta (lo que comentas de dos veces) no se haga. Es algo contradictorio, creeo.
    – Guim
    el 4 sep. 2019 a las 8:15
  • 1
    No, lo que quiero es que si vuelvo a seleccionar el mismo valor en el <select> vuelva a ejecutar su comportamiento cosa que con el onchange no ocurre.. no es que solo ejecute el comportamiento si lo selecciono dos veces..
    – RazerJs
    el 4 sep. 2019 a las 8:30
  • 1
    Sisi, creo que te entiendo, lo que digo es que quieres eso y que cuando quieras selecionar otro (cosa que lo que haces tambien es selecionar el ultimo que esta selecionado), cosas que, creeo, son contraproducentes. Seguire la pregunta pues si hay respuesta estoy interesado.
    – Guim
    el 4 sep. 2019 a las 8:44
  • 1
    Si puede ser verdad no es lo mejor.. pero en este caso lo quiero hacer asi pq con el primer <select> selecciono un anno y en dependecia de este anno seleccionado es distinta las consultas ajax, al seleccionar el valor del otro <select> ... digamos que quiero hacer la misma consulta pero para otro anno selecciono otro anno pero para hacer la misma consulta tengo q ir a otro valor y luego seleccionar el mismo.. es por eso q no me sirve el onclick, no quiero usar un boton para tomar los dos valores de los select y tmb me da curiosidad.. saludos
    – RazerJs
    el 4 sep. 2019 a las 9:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.