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 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 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
php自定义session示例分享
2014/04/22 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
详解react-redux插件入门
2018/04/19 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python生成随机数组的方法小结
2017/04/15 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
工商管理专业毕业生求职信
2014/05/26 职场文书
承诺函格式模板
2015/01/21 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Python中可变和不可变对象的深入讲解
2021/08/02 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android