Question

我想在select元素中添加一个事件监听器，并在选择一个选项时执行一个操作。我的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>

Answer 2

您可以使用jquery .change()函数。在此功能中，您可以比较您的价值并相应地进行操作。

Read Here

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

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

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

4 个答案: