在前端开发中，经常需要获取用户在下拉菜单（SELECT）中所选择的选项。本文将介绍如何使用JavaScript获取当前选中的选项，并提供示例代码。
获取当前选中的选项
要获取当前选中的选项，我们可以使用selectedIndex属性。该属性返回一个数字，表示当前选中选项在下拉菜单中的索引位置。
<select id="mySelect"> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> </select>
const selectElement = document.getElementById('mySelect');
const selectedOptionIndex = selectElement.selectedIndex;上述代码中，我们首先通过getElementById方法获取了下拉菜单元素，然后通过selectedIndex属性获取了当前选中选项的索引值。注意，这个值是从 0 开始计数的。
获取当前选中的选项的值和文本
除了获取当前选中选项的索引值外，我们还可以获取当前选中选项的值和文本。要做到这一点，我们可以使用value和text属性。value属性返回选项的值，而text属性返回选项的文本。
const selectElement = document.getElementById('mySelect');
const selectedOption = selectElement.options[selectElement.selectedIndex];
const selectedOptionValue = selectedOption.value;
const selectedOptionText = selectedOption.text;上述代码中，我们通过options属性获取了下拉菜单的所有选项，然后通过当前选中选项的索引值获取了当前选中选项对象。最后，我们通过该对象的value和text属性获取了当前选中选项的值和文本。
示例代码
下面是一个完整的示例代码，在页面上展示了如何获取当前选中选项的索引值、值和文本。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------
-------
------
------- --------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
--------
------- ----------------------------------------------
----------- ----- ------------------------------
--------- ----- ------------------------------
---------- ----- -----------------------------
--------
-------- -------------------- -
----- ------------- - ------------------------------------
----- -------------- - ---------------------------------------------------
----- -------------------- - -----------------------------------------
----- -------------------- - -----------------------------------------
----- ------------------- - ----------------------------------------
-------------------------------- - ----------------------------
-------------------------------- - ---------------------
------------------------------- - --------------------
-
---------
-------
-------在上述示例代码中，我们首先定义了一个下拉菜单和一个按钮。当用户点击按钮时，会调用showSelectedOption函数，该函数会获取当前选中选项的索引值、值和文本，并将它们展示在页面上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24367