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 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
JavaScript的==运算详解
Jul 20 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
js canvas实现橡皮擦效果
Dec 20 Javascript
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
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python适合做数据挖掘吗
2020/06/16 Python
Python调用C/C++的方法解析
2020/08/05 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
公司企业表扬信
2014/01/11 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
购房委托书
2014/10/15 职场文书
综合素质评价自我评价
2015/03/06 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
暖春观后感
2015/06/08 职场文书