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 相关文章推荐
IE6 hack for js 集锦
Sep 23 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
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下使用无限生命期Session的方法
2007/03/16 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
layui关闭层级、简单监听的实例
2019/09/06 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现simhash算法实例
2014/04/25 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python 实现汉诺塔游戏
2020/11/28 Python
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
教育局长自荐信范文
2013/12/22 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
yy生日主持词
2014/03/20 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2016年情人节问候语
2015/11/11 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书