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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
js 函数的副作用分析
Aug 23 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
tsconfig.json配置详解
May 17 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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 在线翻译函数代码
2009/05/07 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
考试违纪检讨书
2014/02/02 职场文书
竞争上岗实施方案
2014/03/21 职场文书
春风行动实施方案
2014/03/28 职场文书
英文推荐信格式范文
2014/05/09 职场文书
社区服务活动报告
2015/02/05 职场文书
三下乡个人总结
2015/03/04 职场文书
管理失职检讨书
2015/05/05 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
Java基础-封装和继承
2021/07/02 Java/Android
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis