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之Document元素选择器篇
Aug 14 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
欢迎横幅标语
2014/06/17 职场文书
庆祝儿童节标语
2014/10/09 职场文书
大学生操行评语大全
2014/12/31 职场文书
现货白银电话营销话术
2015/05/29 职场文书
迎国庆主题班会
2015/08/17 职场文书
python Polars库的使用简介
2021/04/21 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
MySQL的索引你了解吗
2022/03/13 MySQL
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android