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

更新时间：2019年12月17日 09:25:06 作者：王佳斌

这篇文章主要介绍了JS检索下拉列表框中被选项目的索引号(selectedIndex),本文通过实例代码图文详解的形式给大家介绍的非常详细，需要的朋友可以参考下

前言

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

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

在这里插入图片描述

请思考一个问题，如果这些数据(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)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

小程序实现跑马灯效果
这篇文章主要为大家详细介绍了小程序实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
javascript 中的try catch应用总结
这篇文章主要介绍了javascript 中的try catch应用总结的相关资料,需要的朋友可以参考下
2017-04-04
一个简单的js鼠标划过切换效果
一个实用的简单的鼠标划过切换效果,附带ie6兼容png js
2010-06-06
TypeScript 中的 .d.ts 文件详解(加强类型支持提升开发效率)
.d.ts 文件在 TypeScript 开发中扮演着非常重要的角色,它们让我们能够享受到 TypeScript 强大的类型系统带来的优势,提高代码质量和开发效率,接下来,我们将深入探讨如何为 JavaScript 库和自定义模块创建 .d.ts 文件,以及一些最佳实践和注意事项,一起看看吧
2023-09-09
TypeScript学习笔记之类型窄化篇
目前用TypeScript的人越来越多,尤其是一些大厂,大的项目,github上面很多开源项目也都是ts语法编译的,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型窄化的相关资料,需要的朋友可以参考下
2021-09-09
微信小程序实现导航功能的操作步骤
这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
JS在onclientclick里如何控制onclick的执行
这篇文章主要介绍了JS在onclientclick里如何控制onclick的执行的相关资料,需要的朋友可以参考下
2016-05-05
FormValidate 表单验证功能代码更新并提供下载
加入验证模式 4,同3,但是当验证不通过时，立即停止向下检查。在模式3下，如果发生错误，会把错误记录，并向下检查，模式4就不向下检查了
2008-08-08
起点页面传值js,有空研究学习下
起点上的页面传值js,有空研究下
2010-01-01
原生JS实现pc端轮播图效果
这篇文章主要为大家详细介绍了原生JS实现pc端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12