如何向选择元素添加事件监听器？

Question

我希望能够为选择元素添加事件监听器，并在选项被选择时执行某个操作。我的 HTML 代码如下：

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

当选择“是”时：执行某些操作，如果选择“否”则执行其他操作。

以下是我目前所拥有的：

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 onChange="myFunction()" id="a_background">。所以我想添加一个事件监听器。

- Mariton

---

你有研究过“JavaScript事件处理程序”或jQuery事件处理程序吗？你具体尝试了什么，遇到了什么问题？ - scrappedcola

请检查我的答案。 - m00n

@scrappedcola 我已经对两者进行了研究。由于我无法添加Jquery库，所以我想使用纯JavaScript。 - Mariton

@scrappedcola，我更新了我的问题并包含了一个代码示例。 - Mariton

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>

- Zakaria Acharki

Answer 2

document.getElementById("a_background").addEventListener("change", function(){
     var e = document.getElementById("a_background");
     var selected = e.options[e.selectedIndex].text;
     if(selected =='yes')
        doSomething();
});

- Amor

Answer 3

您可以使用jQuery的.change()函数来实现此功能。在该函数内部，您可以比较您的值并相应地执行操作。

点击此处阅读更多

$(document).ready(function() {
  $("#a_background").change(function() {
    if ($(this).val() == "1") {
      console.log("Yes");
    } else {
      console.log("No");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="a_background" name="background" class="widget">
 <option value="1">Yes</option>
 <option value="0" selected="selected">No</option>
</select>

- Sanchit Patiyal

---

请注意，OP中没有jQuery标签。 - Zakaria Acharki

@ZakariaAcharki 是的，我刚给他提供了一个替代方案。 - Sanchit Patiyal

@ZakariaAcharki 虽然这是一个很好的解决方案，但不幸的是我只能使用纯JavaScript。 - Mariton

请检查我的答案 @Mariton - Zakaria Acharki

@ZakariaAcharki 我更新了我的问题，包括了一个代码示例。 - Mariton

Answer 4

尝试使用 onchange="myFunction()" 代替 onChange="myFunction()"

function myFunction()
{
  console.log(document.getElementById("a_background").value == 1 ? 'Yes selected' : 'No selected');
}

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

- m00n

---

没有回答问题。OP明确表示他们不能使用内联事件。 - scrappedcola

如所述，我不能使用内联事件。 - Mariton