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 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
javascript实现在线客服效果
Jul 15 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
js实现弹窗效果
Aug 09 Javascript
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
B2K与车机的中波PK
2021/03/02 无线电
php 将excel导入mysql
2009/11/09 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP中串行化用法示例
2016/11/16 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
详解微信UnionID作用
2019/05/15 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
详解python中index()、find()方法
2019/08/29 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
艺术用品:Arteza
2018/11/25 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
同事吵架检讨书
2014/02/05 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
消防安全宣传口号
2014/06/10 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
实习介绍信模板
2015/01/30 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书