HTML 中的 Select 元素允许用户在一个预定义的选项列表中选择一个值，这在前端开发中非常常见。在本文中，我们将探讨如何使用 JavaScript 从 Select 元素中获取所选取的值或文本。
监听 Select 改变事件
要获取 Select 元素中的所选值或文本，我们需要首先监听 change 事件。Select 元素的 change 事件在选择改变时触发。我们可以通过为 Select 元素添加 onchange 属性或使用 addEventListener 方法来绑定监听器函数。
以下是一个基本的示例：
-- -------------------- ---- -------
------ ----------------- - ------------
------- ----------
------- ----------------------------
------- --------------------------
------- ----------------------------------
------- --------------------------
---------
--------
----- ------------- - --------------------------------
---------------------------------------- ------- -- -
-------------------------------- -- -------
------------------------------------------------------------------- -- --------
---
---------在上面的示例中，我们首先获取 Select 元素，然后使用 addEventListener 方法为其添加一个 change 监听器。当用户更改所选项时，该监听器将被调用。在这个监听器里，我们将使用 event.target.value 来获取所选项的值，并使用 event.target.options[event.target.selectedIndex].text 来获取所选项的文本。
通过 Select 的 value 属性获取选中的值
要获取 Select 元素中的所选值，我们可以使用 Select 元素的 value 属性。例如：
-- -------------------- ---- ------- ------- ---------- ------- ---------------------------- ------- -------------------------- ------- ---------------------------------- ------- -------------------------- --------- -------- ----- ------------- - -------------------------------- --------------------------------- -- ------- ---------
在上面的示例中，我们首先获取 Select 元素，然后使用 value 属性来获取所选项的值。请注意，此方法只适用于具有 value 属性的选项，如果没有设置 value，则返回的是选项文本。
通过 option 的 text 属性获取选中的文本
如果您需要获取所选项的文本而不是值，可以使用所选项的 text 属性。例如：
-- -------------------- ---- ------- ------- ---------- ------- ---------------------------- ------- -------------------------- ------- ---------------------------------- ------- -------------------------- --------- -------- ----- ------------- - -------------------------------- --------------------------------------------------------------------- -- -------- ---------
在上面的示例中，我们使用 options 属性来获取 Select 元素的选项列表，然后使用所选项的 text 属性来获取其文本。
结论
在本文中，我们探讨了如何从 Select 元素中获取所选值或文本。通过监听 Select 元素的 change 事件，并使用它的 value 或选项的 text 属性，我们可以轻松地获取用户所选的值或文本。这是前端开发中非常有用的技巧，希望这篇文章能对你有所启发！
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26790