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 实现对象 匀速/变速运动的方法
May 08 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
Vue自定义多选组件使用详解
Sep 08 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
多文件上传的例子
2006/10/09 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
AngularJS快速入门
2015/04/02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python+logging+yaml实现日志分割
2019/07/22 Python
pytorch 模型可视化的例子
2019/08/17 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
旅游网创业计划书
2014/01/31 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
普通党员个人整改措施
2014/10/27 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫