如何向 select 元素添加事件侦听器？

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>