在下拉列表中获取选定的值 - JavaScript

有时候我们需要从下拉列表中获取用户选择的选项的值。JavaScript 可以帮我们实现这个功能。在本文中，我们将介绍如何使用 JavaScript 获取下拉列表中被选中的值。

HTML

我们需要先在 HTML 中创建一个下拉列表以供用户选择，如下所示：

<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

<select> 元素包含多个 <option> 元素。每个 <option> 元素有一个 value 属性来表示该选项的值。用户选择一个选项时，该选项的 value 属性的值将被用作其值。

JavaScript

为了获取被选中的选项的值，我们需要在 JavaScript 代码中使用一个事件监听函数。在这个函数中，我们将使用 selectedIndex 属性获取用户选择的选项的索引，并且使用 options 属性获取所有选项。最后，我们使用选择的选项的值来执行一些操作，比如在页面上显示它。

let selectElement = document.getElementById("mySelect");
selectElement.addEventListener("change", function() {
  let selectedIndex = selectElement.selectedIndex;
  let selectedValue = selectElement.options[selectedIndex].value;
  console.log("Selected value: " + selectedValue);
});

这段代码将在下拉列表的选项更改时运行。它将获取被选中选项的索引和该选项的值，并在浏览器的控制台中输出。

结论

获取下拉列表中选定的值是一项常见的任务。使用 JavaScript，我们可以轻松地访问用户所选择选项的值。如上所示，我们可以获取选项的值，并据此执行其他操作。