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


Posted in Javascript onDecember 17, 2019

前言

在开始本文主题之前,先来看一个 HTML demo,一个非常简单的选择列表(select):

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

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

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

selectedIndex API

JavaScript 提供了找到select ID索引号的方法,它反映了第一个或最后选择的索引 <option> 元件,这取决于值 multiple,注意,该值为 -1 指示未选择任何元素。

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

语法:

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

获取索引 / 重置索引

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

HTML:

<select id="select">
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>
<button onclick="get()">获取索引号</button>
<button onclick="reset()">重置索引号</button>

JavaScript:

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

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

总结

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

Javascript 相关文章推荐
JS动态调用方法名示例介绍
Dec 18 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
JS实现打字游戏
Dec 17 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
JS实现打字游戏
Dec 17 #Javascript
js实现打字小游戏
Dec 17 #Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 #Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 #Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 #Javascript
js DOM的事件常见操作实例详解
Dec 16 #Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 #Javascript
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
python时间整形转标准格式的示例分享
2014/02/14 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python有证书的加密解密实现方法
2014/11/19 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python基本socket通信控制操作示例
2019/01/30 Python
浅谈python中get pass用法
2019/03/19 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
广告学专业毕业生自荐信
2013/09/24 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
新学期标语
2014/06/30 职场文书
护士自荐信怎么写
2015/03/06 职场文书
五一晚会主持词
2015/07/01 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016入党心得体会范文
2016/01/06 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Java中API的使用方法详情
2022/04/06 Java/Android