select下拉选项的selectedIndex属性（你用过吗）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>select下拉选项的selectedIndex属性</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body style="margin-top: 30vh;"><div class="box" style="width: 200px;margin: 0 auto;border:0.3px solid #2195FF;padding:30px"><select name="cons" id="cons" style="width: 150px;height: 30px;text-indent: 10px; "><option value="0">please0</option><option value="1">option1</option><option value="2">option2</option><option value="3">option3</option><option value="4">option4</option><option value="5">option5</option><option value="6">option6</option><option value="7">option7</option><option value="8">option8</option></select><ul><li>设置选中项</li><li>获取索引</li><li>删除指定项</li><li>修改指定项文本</li></ul></div><script>var cons = document.getElementById("cons");// 设置选中项(0-第一项，-1-空)cons.selectedIndex = 0;cons.addEventListener("change", function() {// 获取索引let getIndex = cons.selectedIndex;console.log("当前选项索引值：", getIndex);// 删除指定项let optionLen = cons.querySelectorAll("option").length;console.log("删除最后一项");cons.remove(optionLen - 1);// 修改指定项文本cons.options[0].text = "修改指定项文本"})</script><script>console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');</script>
</body></html>

标签：javascript，下拉选项，select，option，索引值

更多演示案例，查看 案例演示

欢迎评论留言!

select下拉选项的selectedIndex属性（你用过吗）相关推荐

微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
element UI select下拉选项位置问题
element UI select下拉选项位置问题在使用elementUI下拉选项时,可能存在下拉时下拉列表选项框的位置距离下拉框所在的位置距离过大,这个是由于elementUI自己设置的根据下拉框 ...
学习使用jquery控制select下拉选项的字体样式
学习使用jquery控制select下拉选项的字体样式实现代码实现代码 <script src="../jquery-2.1.4.min.js"></scri ...
VUE ELEMENT UI 清空select 下拉选项
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true&qu ...
java select 下拉选项框option定位_java select 下拉选项框opt
java select 下拉选项框opt [2021-02-05 09:44:01] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace( ...
select下拉选项禁用
如果我们要实现如下效果,让下拉选项提示项"请选择"不可选实现代码为: <select><option disabled value=""&g ...
layui 渲染select下拉选项，日期控件的用法
最近项目中用到关于layui的前端技术,在使用layui 渲染select option下拉复选框时出现了没有值渲染的问题,还有使用layui日期的过程 ,接下来就一起看看吧. /** *从后台渲染 ...
antd select 下拉菜单的 style 属性_如何优雅地彻底解决 antd 全局样式问题
背景由于某些原因,我们团队负责在 GitLab 上做二次开发,简单理解就是在 GitLab 上挂个 DOM 渲染用 React 写的一些组件,组件库选择了 antd,尴尬的是引入之后发现,GitLa ...
微信小程序自定义select下拉选项框
第一步:创建组件所需的文件第二步:开始配置组件 select.json {"component": true,"usingComponents": {&quo ...

select下拉选项的selectedIndex属性（你用过吗）

目录

内容介绍

一、使用方法

1、设置选中项

2、获取索引

3、删除指定项

4、修改指定项文本

二、示例：

select下拉选项的selectedIndex属性（你用过吗）相关推荐

最新文章

热门文章