JS对select控件option选项的增删改查示例代码


Posted in Javascript onOctober 21, 2013

Javascript 操作select是表单中常见的一种,下面介绍几种常用的JS动态操作select中的各种方法:

//动态创建select 
function createSelect() 
{ 
var mySelect = document.createElement("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect); 
}

//添加选项option 
function addOption() 
{ 
//根据id查找对象, 
var obj=document.getElementById('mySelect'); 
//添加一个选项 
obj.add(new Option("文本","值")); //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
}

//删除所有选项option 
function removeAll() 
{ 
var obj=document.getElementById('mySelect'); 
obj.options.length=0; 
}

//删除一个选项option 
function removeOne() 
{ 
var obj=document.getElementById('mySelect'); 
//index,要删除选项的序号,这里取当前选中选项的序号 
var index=obj.selectedIndex; 
obj.options.remove(index); 
}

//获得选项option的文本 
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].text;

//修改选项option 
var obj=document.getElementById('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index]=new Option("新文本","新值");
Javascript 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
js传参数受特殊字符影响错误的解决方法
Oct 21 #Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 #Javascript
JS操作Cookie写入和读取实例代码
Oct 20 #Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 #Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 #Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 #Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 #Javascript
You might like
php的header和asp中的redirect比较
2006/10/09 PHP
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
js尾调用优化的实现
2019/05/23 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
JS实现打字游戏
2019/12/17 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python变量的存储原理详解
2019/07/10 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
入团者的自我评价分享
2013/12/02 职场文书
酒店个人求职信范文
2014/01/25 职场文书
年度考核自我评价
2014/01/25 职场文书
人力资源主管职责范本
2014/03/05 职场文书
协议书样本
2014/04/23 职场文书
营业员岗位职责范本
2015/04/14 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Java基础——Map集合
2022/04/01 Java/Android