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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
nodeJS微信分享
2017/12/20 NodeJs
webpack实用小功能介绍
2018/01/02 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
粗加工管理制度
2014/02/04 职场文书
团队经理竞聘书
2014/03/31 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
安全第一课观后感
2015/06/18 职场文书
老人节主持词
2015/07/04 职场文书