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 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
js实现时间日期校验
May 26 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 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异常处理使用示例
2014/02/25 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Django框架验证码用法实例分析
2019/05/10 Python
python中JWT用户认证的实现
2020/05/18 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
编辑找工作求职信分享
2014/01/03 职场文书
高中化学教学反思
2014/01/13 职场文书
5.1手机促销活动
2014/01/17 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
护校行动方案
2014/05/31 职场文书
廉政教育的心得体会
2014/09/01 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
护士岗位竞聘书
2015/09/15 职场文书
社会实践心得体会范文
2016/01/14 职场文书