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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
Vue单文件组件开发实现过程详解
Jul 30 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
如何选购合适的收音机
2021/03/01 无线电
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Python os模块介绍
2014/11/30 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
经济管理专业自荐信
2013/12/30 职场文书
总经理岗位职责描述
2014/02/08 职场文书
2015年入党决心书
2015/02/05 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
如何写好活动总结
2019/06/21 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python