当用户在HTML表单中选择一个选项时，我们可能需要获取该选项的文本内容以便于进行进一步的处理。在本文中，我们将介绍如何使用JavaScript来获取选择框的选定文本。
HTML选择框的基础知识
HTML选择框是通过<select>和<option>标签创建的。<select>标签定义了一个下拉列表，而<option>标签定义了下拉列表中的选项。
例如，以下代码创建了一个包含三个选项的选择框：
<select id="mySelect"> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> </select>
获取选择框的选定文本
要获取选择框的选定文本，我们可以使用selectedIndex属性和options数组。
selectedIndex属性返回当前选定项的索引，而options数组包含所有选项。
以下代码演示了如何使用这些属性来获取选择框的选定文本：
const selectBox = document.getElementById("mySelect");
const selectedText = selectBox.options[selectBox.selectedIndex].text;在上面的代码中，我们首先使用getElementById方法获取选择框的元素对象，然后使用options数组和selectedIndex属性获取当前选定项的文本内容。
示例代码
以下是一个完整的示例代码，它展示了如何在选择框中选择选项并获取选定文本：
-- -------------------- ---- -------
--------- -----
------
------
-------------------------
-------
------
------- --------------
------- ----------------------
------- ----------------------
------- ----------------------
---------
------- -------------------------------------------
--------
-------- ----------------- -
----- --------- - ------------------------------------
----- ------------ - ------------------------------------------------
--------------------------------
-
---------
-------
-------在上面的代码中，我们创建了一个包含三个选项的选择框，并添加了一个按钮。当用户单击按钮时，会调用getSelectedText函数来获取当前选定项的文本内容，并使用alert方法将其显示出来。
总结
通过本文，我们学习了如何使用JavaScript获取选择框的选定文本。这对于处理表单数据非常有用。同时，我们还展示了一个完整的示例代码，以帮助读者更好地理解这个过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12796