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 相关文章推荐
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
vue购物车插件编写代码
Nov 27 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
一起深入理解js中的事件对象
Feb 06 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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
Three.js学习之网格
2016/08/10 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
中国制造网:Made-in-China.com
2019/10/25 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
大学校庆策划书
2014/01/31 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
十二生肖观后感
2015/06/12 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
七年级作文之环保作文
2019/10/17 职场文书
python某漫画app逆向
2021/03/31 Python
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python