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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
swiper自定义分页器使用方法详解
Sep 14 Javascript
ES5新增数组的实现方法
May 12 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
Jquery性能优化详解
2014/05/15 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
浅析java线程中断的办法
2018/07/29 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
js数组去重的方法总结
2019/01/18 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
详解React 条件渲染
2020/07/08 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
Java面试题汇总
2015/12/06 面试题
暑期辅导班宣传单
2015/07/14 职场文书
保险公司增员口号
2015/12/25 职场文书
golang中的空slice案例
2021/04/27 Golang