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

Question

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

到目前为止，我已经尝试了 "onselect"、"onclick"、"onmousedown"、"onblur" 和 none，这些似乎都有效。就此而言，每次有人从下拉菜单列表中选择新项目或同一项目时需要更新的值是多少？

Answer 1

Try on onchange event handler. That will call the method every time the selection is being change.Check this

Answer 2

你说的是下拉菜单列表，它可以用各种 html 元素创建，如果你使用 'select' 那么你必须使用 onchange 事件，但如果你使用无序列表或其他您必须对列表项使用 onclick

Answer 3

您需要使用 on change，原因是您要更改输入表单元素的值：Check This example

Answer 4

您需要使用 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>

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

What event handler do I need to use for a drop down menu list in JavaScript?

html

javascript

forms

event-handling