JS操作select下拉框动态变动(创建/删除/获取)


Posted in Javascript onJune 02, 2013

1.动态创建select

function createSelect(){ 
var mySelect = document.createElement_x("select"); 
mySelect.id = "mySelect"; 
document.body.appendChild(mySelect); 
}

2.添加选项option
function addOption(){ 
//根据id查找对象, 
var obj=document.getElementByIdx_x('mySelect'); 
//添加一个选项 
obj.add(new Option("文本","值")); 
}

3.删除所有选项option
function removeAll(){ 
var obj=document.getElementByIdx_x('mySelect'); 
obj.options.length=0; 
}

4.删除一个选项option
function removeOne(){ 
var obj=document.getElementByIdx_x('mySelect'); 
//index,要删除选项的序号,这里取当前选中选项的序号 
var index=obj.selectedIndex; 
obj.options.remove(index); 
}

5.获得选项option的值
var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].value;

6.获得选项option的文本
var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index].text;

7.修改选项option
var obj=document.getElementByIdx_x('mySelect'); 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
var val = obj.options[index]=new Option("新文本","新值");

8.删除select
function removeSelect(){ 
var mySelect = document.getElementByIdx_x("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
}
Javascript 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现单行文字间歇向上滚动源代码
Jun 02 #Javascript
js内存泄露的几种情况详细探讨
May 31 #Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 #Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 #Javascript
js 输出内容到新窗口具体实现代码
May 31 #Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 #Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 #Javascript
You might like
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
php生成图片验证码
2015/06/09 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
详解使用Python处理文件目录的相关方法
2015/10/16 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
python 实现图片批量压缩的示例
2020/12/18 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
自我推荐书
2013/12/04 职场文书
教师岗位职责范本
2013/12/29 职场文书
学校消防安全责任书
2014/07/23 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
公司给客户的感谢信
2015/01/23 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
教学副校长工作总结
2015/08/13 职场文书
Python Socket编程详解
2021/04/25 Python