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

【问题标题】：What event handler do I need to use for a drop down menu list in JavaScript?我需要为 JavaScript 中的下拉菜单列表使用什么事件处理程序？
【发布时间】：2015-11-26 07:01:52
【问题描述】：

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

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

【问题讨论】：

onchange 可能还有oninput?
你要使用onchange

标签： javascript html forms event-handling

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

尝试 onchange 事件处理程序。每次更改选择时都会调用该方法。Check this

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：