js操作HTML的select
1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="paraValue"的Item为选中 8得到select的当前选中项的value 9得到select的当前选中项的text 10得到select的当前选中项的Index 11清空select的项 JS代码:
// 1.判断select选项中 是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { isExit = true; break; } } return isExit; } // 2.向select选项中 加入一个Item function jsAddItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { alert("该Item的Value值已经存在"); } else { var varItem = new Option(objItemText, objItemValue); objSelect.options.add(varItem); alert("成功加入"); } } // 3.从select选项中 删除一个Item function jsRemoveItemFromSelect(objSelect, objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { objSelect.options.remove(i); break; } } alert("成功删除"); } else { alert("该select中 不存在该项"); } } // 4.删除select中选中的项 function jsRemoveSelectedItemFromSelect(objSelect) { var length = objSelect.options.length - 1; for(var i = length; i >= 0; i--){ if(objSelect[i].selected == true){ objSelect.options[i] = null; } } } // 5.修改select选项中 value="paraValue"的text为"paraText" function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect, objItemValue)) { for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].value == objItemValue) { objSelect.options[i].text = objItemText; break; } } alert("成功修改"); } else { alert("该select中 不存在该项"); } } // 6.设置select中text="paraText"的第一个Item为选中 function jsSelectItemByValue(objSelect, objItemText) { //判断是否存在 var isExit = false; for (var i = 0; i < objSelect.options.length; i++) { if (objSelect.options[i].text == objItemText) { objSelect.options[i].selected = true; isExit = true; break; } } //Show出结果 if (isExit) { alert("成功选中"); } else { alert("该select中 不存在该项"); } } // 7.设置select中value="paraValue"的Item为选中 document.all.objSelect.value = objItemValue; // 8.得到select的当前选中项的value var currSelectValue = document.all.objSelect.value; // 9.得到select的当前选中项的text var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; // 10.得到select的当前选中项的Index var currSelectIndex = document.all.objSelect.selectedIndex; // 11.清空select的项 document.all.objSelect.options.length = 0;
转载于:https://www.cnblogs.com/yangzhilong/archive/2013/01/28/2880104.html
js操作HTML的select相关推荐
- js 操作select和option
2019独角兽企业重金招聘Python工程师标准>>> 1.动态创建selectfunction createSelect(){var mySelect = document.cre ...
- js操作select相关方法(收集)
<js操作select相关方法> 1.判断select选项中 是否存在value="paravalue"的item 2.向select选项中 加入一个item 3.从s ...
- Js操作Select大全(取值、设置选中)
Js操作Select大全(取值.设置选中) Js操作Select是很常见的,也是比较实用的. jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自 ...
- Js操作Select大全
判断select选项中 是否存在Value="paraValue"的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中 ...
- JS操作Excel读取和写入(模板操作)
前一段时间一直在做报表,所以肯定会用到Excel的操作,但是在网上查阅资料有关JS操作excel较少,有的话,也都是老生常谈或很零碎的一些东西.本人是在实际项目中摸索出,JS读写Excel(模板)数据 ...
- vue.js 默认选中select_vue.js 解决v-model让select默认选中不生效的问题
笔者今天在开发中遇到一个看起来很神奇的问题,平时编辑的页面我们select下拉选框利用vue.js 的v-model来实现自动选中,今天无论如何都选不中,后来经过很久的复查和大神的一句话终于解决这个这 ...
- js修改mysql数据库数据_Node.js操作mysql数据库增删改查
关于node.js操作mysql数据库的相关介绍请阅读全文吧.下文介绍的非常详细,具体内容如下所示: 安装mysql模块 npm install mysql 数据库准备 mysql server所在的 ...
- 5.14 js对象 函数 js操作document对象
---对象 var myObject ={} /* 声明对象字面变量*/ myObject点语法取值 赋值 代码格式 var person = { name : "zhangs ...
- 浅谈Word.Application,关于js操作word文档的使用
这篇文章只是说个人放个笔记在这里,并没有讲解的意思,但为了进来的朋友能知道我在说啥,写的过程中我还是简单介绍一下. 官网地址:https://docs.microsoft.com/zh-cn/offi ...
最新文章
- matlab 注意事项
- ios时间相差多少天_IOS计算某个日期和当前时间的天数差
- android kotlin面试题,Kotlin面试25题
- android core log,Android 日志系统(Logcat)的实现分析
- 信息学奥赛一本通 1381:城市路(Dijkstra)
- python numpy ndarray之basic operations
- AnalyserNode
- centos 6.5 zabbix 离线安装历程
- 猜算式,四个两位数字不可以重复
- android studio不显示标题,Android Studio:活动预览不显示标题栏
- python汉化版下载-Python中文版
- BigGAN高保真自然图像合成的大规模GAN训练
- 内存超频时序怎么调_超频讲解:内存时序设置说明二
- 苹果手机网页选择框 下拉框点击放大处理
- [MySQL] 运算符
- 23、账号与权限管理
- cve-2005-1794
- UI自动化工具Cypress测试案例、生成报告---Linux版
- python 游戏(船只寻宝)
- ROM,RAM,Cache,Mask ROM,PROM,EPROM,EEPROM,Flash Memory有什么区别和联系【笔记】
热门文章
- ACE_Task介绍
- 【解决办法】pandas画出时序数据(股票数据)横轴不是时间
- 【GANs入门】pytorch-GANs任务迁移-单个目标(数字的生成)
- java中什么表示菜单项_下列类型中,表示菜单项的是( )。_学小易找答案
- Spring @Autowired 注入为 null
- codeforces271D
- html5--1.15 style元素与HTML样式基础
- 隐藏Nginx或Apache以及PHP的版本号的方法
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
- Pair Project: Elevator Scheduler Report By Hu Renjun