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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
js变量以及其作用域详解
Jul 18 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
js实现延迟加载的方法
Jun 24 Javascript
谈一谈javascript闭包
Jan 28 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
Vue父组件监听子组件生命周期
Sep 03 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读取XML值的代码(推荐)
2011/01/01 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python+OpenCV实现图像拼接
2020/03/05 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
销售行政专员职责
2014/01/03 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
商业房地产广告语
2014/03/13 职场文书
总经理工作职责范文
2014/03/14 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
感恩节寄语2015
2015/03/24 职场文书
河童之夏观后感
2015/06/11 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
MySQL的安装与配置详细教程
2021/06/26 MySQL
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS