javascript - 我需要为 JavaScript 中的下拉菜单列表使用什么事件处理程序？

Question

每次从下拉菜单列表中选择新项目时，我都需要创建一个事件处理程序来运行我的函数。

到目前为止，我已经尝试过“onselect”、“onclick”、“onmousedown”和“onblur”，但似乎都不起作用。就此而言，每次有人从下拉菜单列表中选择新项目或同一项目时需要更新的值是多少？

Answer 1

您需要使用 onchange事件处理程序，您可以使用不同的方法来实现它。第一个是直接在你的 html select 标签中写事件:

function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
}

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

---

仅使用 Javascript:

var mySelect = document.getElementById('mySelect');

mySelect.onchange = function() {
   var x = document.getElementById("mySelect").value;
   document.getElementById("demo").innerHTML = "You selected: " + x;
 }

<p>Select a new car from the list.</p>

<select id="mySelect">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

---

或者你可以使用jQuery:

$("#mySelect").change(function() {
    $("#demo").html("You selected: " + this.value);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Select a new car from the list.</p>

<select id="mySelect">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

或者对于 jQuery，您可以使用 on功能:

$("#mySelect").on("change", function() {
    $("#demo").html("You selected: " + this.value);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Select a new car from the list.</p>

<select id="mySelect">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>