JavaScript获取select选中值的两种方法实现
作者：但老师
在Web开发中,获取<select>元素的选中值是表单处理的常见需求,本文主要介绍了JavaScript获取select选中值的两种方法实现,具有一定的参考价值,感兴趣的可以了解一下
在Web开发中，获取<select>元素的选中值是表单处理的常见需求。
1. 直接获取value属性
const select = document.getElementById('mySelect');
console.log('选中值:', select.value); // 返回选中项的value或text
所有浏览器都支持直接读取<select>元素的value属性：
- 若
<option>设置了value属性，返回value值 - 若未设置
value属性，返回选项的文本内容 - 多选模式则返回第一个选中项
案例
<select id="fruit"> <option>苹果</option> <!-- 未设置value --> <option value="banana">香蕉</option> </select>
console.log(select.value); // "苹果"（text内容） console.log(select.value); // "banana"（value内容）
2. 通过selectedIndex遍历选项
const select = document.getElementById('mySelect');
const index = select.selectedIndex; // 获取选中项索引
const value = select.options[index].value; // 通过options集合获取值
通过selectedIndex获取当前选中项的索引（从0开始）, 再通过options集合访问具体选项对象, 然后读取选项的value或text属性
案例
<select id="fruit"> <option>苹果</option> <!-- 未设置value --> <option value="banana">香蕉</option> </select>
console.log(select.options[0].value); // ""（空value） console.log(select.options[1].value); // "banana"
到此这篇关于JavaScript获取select选中值的两种方法实现的文章就介绍到这了,更多相关JavaScript获取select选中值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！