如何检查多个 select 框是否发生更改

Question

我有 2 个 select 下拉框。如果选项被 selected，我需要做很多迭代。

我的 select 个邮箱：

<select id="time_period">
    <option value="day" selected>Day</option>
    option value="month">Month</option>
</select>

<select id="site">
    <option value="google" selected>Google</option>
    option value="bing">Bing</option>
</select>

我想检查 #time period 中的选项是 selected 还是 #site 中的选项，或者即使两者的选项都是 selected。

有办法吗？

Answer 1

您可以获得一个函数并检查每个 select 框中的选定值

function getSelectedRadio() {
  let getTimePeriod = $('#time_period').val();
  let site = $('#site').val();
  // when both are selected
  if (getTimePeriod && site) {

  }


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="time_period">
  <option value="day" selected>Day</option>
  <option value="month">Month</option>
</select>

<select id="site">
  <option value="google" selected>Google</option>
  <option value="bing">Bing</option>
</select>

<button type='btn' onclick='getSelectedRadio()'>Click</button>

Answer 2

使用onchange方法

(function() {

  var time_period, site;

  document.getElementById("time_period").onchange = function() {
    time_period = document.getElementById("time_period").value;
    console.log(time_period);
    checkBothSelected();
  };
  document.getElementById("site").onchange = function() {
    site = document.getElementById("site").value;
    console.log(site);
    checkBothSelected();
  };

  function checkBothSelected() {
    if (site && time_period) {
      console.log('Both Selected!');
    }
  }

})();

<select id="time_period">
  <option value="day" selected>Day</option>
  <option value="month">Month</option>
</select>

<select id="site">
  <option value="google" selected>Google</option>
  <option value="bing">Bing</option>
</select>

使用 onChange 属性

var time_period, site;

function onSelection(e) {
  if (e.id == 'time_period') {
    time_period = e.value;
  } else if (e.id == 'site') {
    site = e.value;
  }
  console.log(e.value);
  checkBothSelected();
}

function checkBothSelected() {
  if (site && time_period) {
    console.log('Both Selected!');
  }
}

<select id="time_period" onChange="onSelection(this)">
  <option value="day" selected>Day</option>
  <option value="month">Month</option>
</select>

<select id="site" onChange="onSelection(this)">
  <option value="google" selected>Google</option>
  <option value="bing">Bing</option>
</select>

使用 addEventListener

(function() {

  var time_period, site;

  document.getElementById('time_period').addEventListener('change', function() {
    time_period = this.value;
    console.log(time_period);
    checkBothSelected();
  });
  
  document.getElementById('site').addEventListener('change', function() {
    site = this.value;
    console.log(site);
    checkBothSelected();
  });

  function checkBothSelected() {
    if (site && time_period) {
      console.log('Both Selected!');
    }
  }
})()

<select id="time_period">
  <option value="day" selected>Day</option>
  <option value="month">Month</option>
</select>

<select id="site">
  <option value="google" selected>Google</option>
  <option value="bing">Bing</option>
</select>

如何检查多个 select 框是否发生更改

How to check if changes on multiple select boxes happened

html

javascript

jquery

onchange

drop-down-menu