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 相关文章推荐
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 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结合飞信 免费天气预报短信
2009/05/07 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python文件写入实例分析
2015/04/08 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
2015党建工作简报
2015/07/21 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
vue实现登陆页面开发实践
2022/05/30 Vue.js