Home / Questions / 290376
Accepted
RazerJs
Asked: 2020-09-04 23:47:58 +0800 CST 2020-09-04 23:47:58 +0800 CST

如何使用 Onchange 在选择中选择相同的值

  • 772

我有两个select与该事件一起使用，onchange但我希望如果我再次选择第二个的相同值select，它将再次执行其回调函数......示例：如果在选择查询中我选择值“预测”它显示console.log带有年份的文本和选择的数量，但是更改年份并再次选择值不会显示任何内容，因为第二个选择中没有任何变化...我可以为此使用什么事件，或者我可以做什么。 .. 提前致谢

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>

javascript

2 Answers

  1. 尝试使用单击而不是更改。

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

    有关 EventListener 的更多功能，请查看以下链接：

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

    • 3
  2. Best Answer

    您可以使用“状态效果”的概念，使两个事件共享相同的效果，即修改状态并执行您需要的操作。例如如果您选择序列 2019 ---> 其他数据；并且您可以看到消息“组合2019和2已被选中”；选择 2018 时，您会看到新消息“已选择 2018 和 2 的组合”，无需再次选择第二个选择选项，因为它在“状态”中被记住了。在你的情况下，如果你想执行一个异步函数，你可以在“效果”中执行它。在下面的示例中，我使用 setTimeout 来模拟 Ajax 调用并根据所选年份执行不同的效果。

    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