js 获取 select 选中的标签 option 的值

2024-10-09
四川
本文字数：1134 字
阅读完需：约 4 分钟

在 JavaScript 中，我们经常需要获取 HTML 页面中的 select 元素的当前选中项。这个操作在网页开发中非常常见，无论是在提交表单，还是在根据用户的选择动态改变页面内容时，都可能需要用到。

首先，我们需要获取到 select 元素的引用。这可以通过 document.getElementById 或者其他 DOM 查询函数来实现。例如，如果我们的 HTML 代码如下：

<select id="mySelect">  <option value="apple">苹果</option>  <option value="banana">香蕉</option>  <option value="cherry">樱桃</option></select>

复制代码

我们可以通过以下 JavaScript 代码获取到这个 select 元素：

var selectElement = document.getElementById("mySelect");

复制代码

然后，我们可以通过 select 元素的 selectedIndex 属性获取到当前选中项的索引。这个属性的值是一个整数，表示当前选中项的位置，从 0 开始计数。

var selectedIndex = selectElement.selectedIndex;

复制代码

接着，我们可以通过 select 元素的 options 属性获取到所有的 option 元素。这个属性的值是一个类数组对象，其中的每个元素都是一个 option 元素。

var options = selectElement.options;

复制代码

最后，我们可以通过索引从 options 中获取到选中的 option 元素，然后通过其 value 属性获取到选中项的值。

var selectedOption = options[selectedIndex];var selectedValue = selectedOption.value;

复制代码

以上四步可以合并为以下代码：

var selectElement = document.getElementById("mySelect");var selectedIndex = selectElement.selectedIndex;var options = selectElement.options;var selectedOption = options[selectedIndex];var selectedValue = selectedOption.value;

复制代码

这段代码获取到的 selectedValue 就是 select 元素当前选中项的值。

以上是最基本的获取 select 选中项的方法，但在实际应用中，我们可能需要对这个过程进行封装，以便在多处使用。例如，我们可以写一个函数，接收一个 select 元素的 id，返回该元素当前选中项的值：

function getSelectedValue(selectId) {  var selectElement = document.getElementById(selectId);  var selectedIndex = selectElement.selectedIndex;  var options = selectElement.options;  var selectedOption = options[selectedIndex];  return selectedOption.value;}

复制代码

然后，我们就可以通过以下代码获取到任何 select 元素的选中项的值：

var value = getSelectedValue("mySelect");

复制代码

以上就是在 JavaScript 中获取 select 选中项的值的方法。希望对你有所帮助。

蓝易云-五网CN2服务器【点我购买】蓝易云采用KVM高性能架构，稳定可靠，安全无忧！蓝易云服务器真实CN2回国线路，不伪造，只做高质量海外服务器。

海外免备案云服务器链接：www.tsyvps.com

蓝易云香港五网 CN2 GIA/GT 精品网络服务器。拒绝绕路，拒绝不稳定。

发布于: 刚刚阅读数: 4

百度搜索：蓝易云

关注

百度搜索：蓝易云 2023-07-05 加入

香港五网CN2免备案服务器

发布

暂无评论

创作场景

js 获取 select 选中的标签 option 的值

百度搜索：蓝易云

评论