前端——原生js获取下拉框选中的值

最新推荐文章于 2024-04-29 23:52:51 发布

boom0000

最新推荐文章于 2024-04-29 23:52:51 发布

阅读量421

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/boomyuan0000/article/details/137250993

版权

本文介绍了如何使用原生JavaScript在HTML下拉框provinceData中添加change事件监听器，获取用户选择的值，并提供了一个封装函数以简化操作。

摘要由CSDN通过智能技术生成

前端——原生js获取下拉框选中的值

直接po出代码

html代码

<select name="" id="" class="provinceData">
            <option value="" class="province">广东省</option>
            <option value="" class="province">福建省</option>
            <option value="" class="province">云南省</option>
            <option value="" class="province">广西省</option>
</select>

目标是获取类名为provinceData的下拉框所选中的值

js代码

//绑定change事件
document.querySelector('.provinceData').addEventListener('change',(e)=>{
		const changeObject=document.querySelector('.provinceData')
        const index = changeObject.selectedIndex  //获取选中项的index
        const pname = changeObject.options[index].value  //pname即为选择项的值
        console.log(pname)
})

这样就顺利拿到了！！

题外话
ↆↆↆ我封装了一个函数ↆↆↆ

//参数是下拉框的类名
function getValue(changeClass){
            const changeObject=document.querySelector(`.${changeClass}`)
            const index = changeObject.selectedIndex
            return changeObject.options[index].value
}