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高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
vue-loader教程介绍
Jun 14 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
使用JS获取SessionStorage的值
Jan 12 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP中::、->、self、$this几种操作符的区别介绍
2013/04/24 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
babel基本使用详解
2017/02/17 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
应聘教师推荐信
2013/10/31 职场文书
音乐教学案例
2014/01/30 职场文书
汽车促销活动方案
2014/03/31 职场文书
小组名称和口号
2014/06/09 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书