javascript - 如何将事件监听器添加到选择元素？

Question

我想向选择元素添加一个事件监听器，并在选择一个选项时执行一个操作。我的 HTML 代码是:

<select id="a_background" name="background" class="widget">
 <option value="1">Yes</option>
 <option value="0" selected="selected">No</option>
</select>

所以当Yes被选中:做某事，如果No被选中:做其他事情

这是我目前所拥有的:

var activities = document.getElementById("a_background");
var options = activities.querySelectorAll("option");

activities.addEventListener("changed", function() {

  if (options == "addNew")
  {
    alert('add New selected');
  }

 else 
  { 
    alert('add None selected');
  }
});

由于限制，我无法在 select 元素中调用函数。例如<select onChange="myFunction()" id="a_background">这就是为什么我想添加一个事件监听器。

Answer 1

这可以简单地使用 addEventListener() 函数来完成:

document.querySelector('#a_background').addEventListener("change", function() {
  if (this.value == "1") {
    console.log('Yes selected');
  }else{
     console.log('No selected');
  }
});

<select id="a_background" name="background" class="widget">
 <option value="1">Yes</option>
 <option value="0" selected="selected">No</option>
</select>