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 45种缓动效果 非常酷
Jun 28 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
javascript 函数调用规则
2009/08/26 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python async with和async for的使用
2019/06/20 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
小学教师自我鉴定范文
2014/03/20 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
家属答谢词
2015/01/05 职场文书
向女朋友道歉的话
2015/01/20 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
create-react-app开发常用配置教程
2022/06/25 Javascript
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS