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 相关文章推荐
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
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
Terran历史背景
2020/03/14 星际争霸
php加密解密字符串示例
2016/10/13 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python函数装饰器用法实例详解
2015/06/04 Python
python套接字流重定向实例汇总
2016/03/03 Python
python 基础教程之Map使用方法
2017/01/17 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
小学生班会演讲稿
2014/01/09 职场文书
优秀护士获奖感言
2014/02/20 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
十八大宣传标语
2014/10/09 职场文书
铣工实训报告
2014/11/05 职场文书
网络销售员岗位职责
2015/04/11 职场文书
化工生产实习心得体会
2016/01/22 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书