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动态创建div
Sep 25 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
js实现缓动动画
Nov 25 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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP整合PayPal支付
2015/06/11 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
python语言使用技巧分享
2016/05/31 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python tkinter窗口最大化的实现
2019/07/15 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
失恋33天观后感
2015/06/11 职场文书
开学典礼观后感
2015/06/15 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
导游词之镜泊湖
2019/12/09 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript