微客导航 » 文章资讯 » JS检索下拉列表框中被选项目的索引号(selectedIndex)

JS检索下拉列表框中被选项目的索引号(selectedIndex)

2023-08-04 11:08:04 198

前言

在开始本文主题之前，先来看一个HTMLdemo，一个非常简单的选择列表(select)：

请思考一个问题，如果这些数据(one/two/three)是从后台请求过来且动态添加渲染进DOM系统的话，你是无法确定每个列表项的索引号的，也就意味着这些列表项没有ID。显然，我们需要获取到用户选择的列表项与当前列表项的索引号(ID)。

selectedIndexAPI

JavaScript提供了找到selectID索引号的方法，它反映了第一个或最后选择的索引

selectedIndex属性可设置或返回下拉列表中被选选项的索引号，若允许多重选择，则仅会返回第一个被选选项的索引号。

语法：

//获取索引号
selectElem.selectedIndex
//重置索引号(newIndex为新值)
selectElem.selectedIndex=newIndex

获取索引/重置索引

我们可以使用JavaScript提供的API来获取当前用户选择列表项的索引号。当然，我们也可以重置(改变)索引号。

HTML：






获取索引号
重置索引号

JavaScript：

//获取列表项(select)
varselect=document.getElementById('select')
//获取索引号
functionget(){
console.log(`当前索引号：${select.selectedIndex}`)
}
//重置索引号
functionreset(){
letflag=select.selectedIndex//频繁使用封装一下(*^_^*)
if(flag=='0'){//重置索引值为0的列表项
flag=999//更改值为999
console.log(`重置后索引号：${flag}`)
console.log(`注意：重置不会改变原值，不信你看现在的值：${select.selectedIndex}`)
}
}

总结

以上所述是小编给大家介绍的JS检索下拉列表框中被选项目的索引号(selectedIndex)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS检索下拉列表框中被选项目的索引号(selectedIndex)

热门推荐

随机推荐