如何从JavaScript下拉菜单中获取选中值：完整解析

别再猜了：如何用JavaScript从下拉菜单中获取选中值？

您是否遇到过这样的情况：用户在下拉菜单中选择了某项，但您的程序却无法“看到”它？很熟悉，对吧？这是Stack Overflow上最常见的问题之一（而且不无道理！），成千上万的初学者甚至经验丰富的开发者都会问。看起来有什么复杂的呢？但确实有细微差别，今天我们就一劳永逸地解决它们。

在本文中，我将向您展示不止一种，而是多种方法，用纯JavaScript从下拉菜单中获取选中值。您将了解value和selectedIndex的区别，如何处理选择事件，以及如何避免多选菜单的陷阱。开始吧！

最简单的方法：value属性

假设您有一个普通的HTML选择框：

<select id="city">\n  <option value="moscow">莫斯科</option>\n  <option value="spb">圣彼得堡</option>\n  <option value="kazan">喀山</option>\n</select>

要获取选中值，我们只需要做两件事：

\n
1. 在DOM中找到<select>元素。
\n
2. 读取它的value属性。
\n

代码实现如下：

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // 例如，输出 "spb"

重要！ <select>元素的value属性会自动返回当前选中<option>的value属性。如果您只需要值而不是文本，这是最简单且推荐的方法。

如果需要获取选中项的文本呢？

有时我们需要的是用户看到的内容（例如，“莫斯科”而不是“moscow”）。这时可以使用选中选项的textContent（或innerText）属性。但首先需要获取该选项本身：

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // 输出 "莫斯科"

这里我们使用了selectedIndex——它是选中元素的索引（从0开始）。然后访问options集合并获取相应的元素。

如何实时响应选择变化？

只获取一次值固然好，但更常见的是当用户改变选择时需要执行某些操作。为此，我们使用change事件：

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('选中值:', selectedValue);\n  console.log('选中文本:', selectedText);\n});

现在，每当用户在下拉菜单中更改城市时，我们都能立即获取更新后的数据。很方便，对吧？

特殊情况：多选菜单（multiple select）

如果您的下拉菜单支持多选呢？例如：

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

在这种情况下，selectElement.value只会返回第一个选中值，而不是全部。要获取所有选中项，需要遍历options集合：

const selectElement = document.getEl