如何在 JavaScript onchange 中获取下拉选择的值

当我们在开发基于 HTML 的 Web 应用程序时，下拉选择框是一个非常常见的控件。在用户选择不同选项时，我们需要在应用程序的后端或前端执行各种操作。

在 JavaScript 中，我们可以使用 onchange 事件来捕获下拉选择控件的值。在这篇文章中，我将介绍如何在 onchange 事件中获取下拉选择的值。

HTML 代码

首先，我们需要创建一个简单的 HTML 下拉选择框。下面是一个示例代码：

<select id="mySelect" onchange="myFunction()">
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
  <option value="4">选项 4</option>
</select>

请注意，onchange 事件是通过 onchange 属性添加到 select 元素中的。当用户选择不同选项时，将调用 myFunction 函数。

JavaScript 代码

接下来，我们需要编写 JavaScript 代码来获取选择框的值并执行操作。请注意，我们需要从 HTML 中获取 select 元素，然后使用 value 属性来获取所选选项的值。

function myFunction() {
  var selectBox = document.getElementById("mySelect");
  var selectedValue = selectBox.value;
  console.log(selectedValue);
}

在上面的代码中，我们首先使用 document.getElementById() 方法获取名为“mySelect”的 select 元素。然后，我们使用 value 属性获取所选项的值，并将其存储在变量 selectedValue 中。

最后，我们使用 console.log() 方法记录所选值。您可以选择在控制台中接收该消息。

总结

现在您已经了解如何在 JavaScript onchange 事件中获取下拉选择的值。使用这些代码片段，您可以执行各种操作，例如向服务器发送请求，更新 UI 或存储所选值。

希望这篇文章对您有所帮助！

参考资料

• HTML select 元素
• JavaScript value 属性