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 jQuery插件练习
Dec 24 Javascript
js工具方法弹出蒙版
May 08 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
jQuery实现左右切换焦点图
Apr 03 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
vue观察模式浅析
Sep 25 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 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 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP插入排序实现代码
2013/04/04 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
python抓取百度首页的方法
2015/05/19 Python
详解python之配置日志的几种方式
2017/05/22 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python3.4解释器用法简单示例
2019/03/22 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
物理专业大学生职业生涯规划书
2014/02/07 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
早读课迟到检讨书
2014/09/25 职场文书
关于分班的感言
2015/08/04 职场文书
2016年教师节慰问信
2015/12/01 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
javaScript Array api梳理
2021/03/31 Javascript