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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
VUE项目实现主题切换的多种方法
Nov 26 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正则验证Email的方法
2015/06/15 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
python集合用法实例分析
2015/05/30 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
什么是python的列表推导式
2020/05/26 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
银行工作检查书范文
2014/01/31 职场文书
公司投资建议书
2014/05/16 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
微信小程序和php的登录实现
2021/04/01 PHP