在前端开发中，获取下拉列表（Select）中用户所选取的值是一个常见需求。本文将介绍如何使用 JavaScript 获取下拉列表中的选定值，并提供示例代码和实际应用场景。
获取下拉列表选定值的方法
获取下拉列表选定值的方法主要有两种：使用原生 JavaScript 和使用 jQuery。下面分别介绍这两种方法。
使用原生 JavaScript
使用原生 JavaScript 可以通过 HTML DOM 对象的 value 属性来获取下拉列表选定值。具体步骤如下：
- 获取下拉列表 DOM 对象。可以使用
document.getElementById方法或document.querySelector方法获取下拉列表 DOM 对象。 - 通过 DOM 对象的 value 属性获取选定值。
示例代码如下：
--------- -----
------
------
---------- -------- -------------
-------
------
------- --------------
------- ----------------------------
------- ------------------------------
------- ------------------------------
---------
------- -------------------------------- -------- --------------
--------
-------- ------------------ -
--- ------ - ------------------------------------
--- ------------- - -------------
---------------------
-
---------
-------
-------使用 jQuery
使用 jQuery 可以使用 val() 方法来获取下拉列表选定值。具体步骤如下：
- 获取下拉列表 jQuery 对象。可以使用
$()方法或jQuery()方法获取下拉列表 jQuery 对象。 - 通过
val()方法获取选定值。
示例代码如下：
--------- -----
------
------
---------- -------- -------------
------- -----------------------------------------------------------
-------
------
------- --------------
------- ----------------------------
------- ------------------------------
------- ------------------------------
---------
------- -------------------------------- -------- --------------
--------
-------- ------------------ -
--- ------ - ---------------
--- ------------- - -------------
---------------------
-
---------
-------
-------实际应用场景
获取下拉列表选定值在实际开发中经常被用到。例如，当用户选择下拉列表中的某个选项后，需要根据选择的值进行页面跳转或发送 Ajax 请求。以下是一个简单的示例：
--------- -----
------
------
------------- ---------------
------- -----------------------------------------------------------
-------
------
------- --------------
------- ----------- ------ -- ------ -----------
------- ------------------------------
------- --------------------------
------- ----------------------------
---------
------- -------------------------
--------
-------------------------- ---------- -
--- ------------- - ---------------------
-- -------------- -- --- -
-------------------- - ---------- - ------------- - -------
-
---
---------
-------
-------上述示例中，当用户选择选项后点击 Go 按钮，将根据所选值跳转到相应的搜索引擎网站。如果用户没有选择任何选项，则不会进行页面跳转。
结论
本文介绍了如何使用 JavaScript 获取下拉列表中的选定值，并提供了原生 JavaScript 和 jQuery 两种方法。此外，还介绍了获取下拉列表选定值的实际应用场景。希望本文能够帮助读者更好地理解和应用相关技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/7275