javascript - 如何检查多个选择框上的更改是否发生

Question

我有 2 个选择下拉框。如果选择了选项，我需要进行多次迭代。

我的选择框：

<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选择了一个选项，#site或者是否选择了两个选项。

有没有办法做到这一点？

标签： javascriptjqueryhtmldrop-down-menuonchange

Answer 1

使用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>