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 相关文章推荐
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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 采集获取指定网址的内容
2010/01/05 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php实用代码片段整理
2016/11/12 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
模拟select的代码
2011/10/19 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
JS实现星星海特效
2019/12/24 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
在Python的web框架中配置app的教程
2015/04/30 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python之super的使用小结
2018/08/13 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
酒店员工培训方案
2014/06/02 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
Spring实现内置监听器
2021/07/09 Java/Android