浅谈下拉菜单中的Option对象


Posted in Javascript onMay 10, 2015

1.创建Option对象

1.1 var optionEle1 = document.createElement('option');

1.2 var optionEle2 = new Option(text, value, defaultSelected, selected);

2.options属性

2.1 select.options返回select标签下面的Option对象的集合

3.清空下拉菜单

3.1 利用for循环删除,注意数组长度的动态变化

3.2 select.options.length = 0;

4.应用

<html> 
<head> 
<script language="javascript"> 
function number(){ 
var obj = document.getElementById("mySelect"); 
//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变 
//obj.options.add(new Option("我的吃吃","4"));再添加一个option 
//alert(obj.selectedIndex);//显示序号,option自己设置的 
//obj.options[obj.selectedIndex].text = "我的吃吃";更改值 
//obj.remove(obj.selectedIndex);删除功能 
} 
</script> 
</head> 
<body> 
<select id="mySelect"> 
<option>我的包包</option> 
<option>我的本本</option> 
<option>我的油油</option> 
<option>我的担子</option> 
</select> 
<input type="button" name="button" value="查看结果" onclick="number();"> 
</body> 
</html>

1.动态创建select

function createSelect(){ 
 
    var mySelect = document.createElement("select");  
mySelect.id = "mySelect";  
document.body.appendChild(mySelect); 
}

2.添加选项option

function addOption(){ 
 
     //根据id查找对象, 
var obj=document.getElementById('mySelect'); 
 
      //添加一个选项 
obj.add(new   Option("文本","值"));  //这个只能在IE中有效 
obj.options.add(new Option("text","value")); //这个兼容IE与firefox 
}

3.删除所有选项option

function removeAll(){ 
var obj=document.getElementById('mySelect'); 
 
obj.options.length=0; 
 
   }

4.删除一个选项option

function removeOne(){ 
var obj=document.getElementById('mySelect'); 
 
      //index,要删除选项的序号,这里取当前选中选项的序号 
 
    var index=obj.selectedIndex; 
obj.options.remove(index);  
}

5.获得选项option的值

var obj=document.getElementById('mySelect'); 
 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
 
var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementById('mySelect'); 
 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
 
var val = obj.options[index].text;

7.修改选项option

var obj=document.getElementById('mySelect'); 
 
var index=obj.selectedIndex; //序号,取当前选中选项的序号 
 
var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){ 
var mySelect = document.getElementById("mySelect"); 
mySelect.parentNode.removeChild(mySelect); 
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html"> 
<head> 
<script language=JavaScript> 
function $(id) 
{ 
return document.getElementById(id) 
} 
 
function show() 
{ 
var selectObj=$("area") 
var myOption=document.createElement("option") 
myOption.setAttribute("value","10") 
myOption.appendChild(document.createTextNode("上海")) 
 
var myOption1=document.createElement("option") 
myOption1.setAttribute("value","100") 
myOption1.appendChild(document.createTextNode("南京")) 
 
selectObj.appendChild(myOption) 
selectObj.appendChild(myOption1) 
 
} 
 
function choice() 
{ 
var index=$("area").selectedIndex; 
var val=$("area").options[index].getAttribute("value") 
 
if(val==10) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var sh=document.createElement("select") 
sh.add(new Option("浦东新区","101")) 
sh.add(new Option("黄浦区","102")) 
sh.add(new Option("徐汇区","103")) 
sh.add(new Option("普陀区","104")) 
$("context").appendChild(sh) 
 
} 
 
if(val==100) 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
var nj=document.createElement("select") 
nj.add(new Option("玄武区","201")) 
nj.add(new Option("白下区","202")) 
nj.add(new Option("下关区","203")) 
nj.add(new Option("栖霞区","204")) 
$("context").appendChild(nj) 
} 
} 
 
function calc() 
{ 
var x=$("context").childNodes.length-1; 
alert(x) 
 
} 
 
function remove() 
{ 
var i=$("context").childNodes.length-1; 
var remobj=$("context").childNodes[i]; 
remobj.removeNode(true) 
} 
</script> 
<body> 
 
<div id="context"> 
<select id="area" on  
change="choice()"> 
</select> 
</div> 
<input type=button value="显示" onclick="show()"> 
<input type=button value="计算结点" onclick="calc()"> 
<input type=button value="删除" onclick="remove()"> 
</body> 
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
javascript里使用php代码实例
Dec 13 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
jquery css实现流程进度条
Mar 26 jQuery
AngularJS基础学习笔记之控制器
May 10 #Javascript
AngularJS基础学习笔记之指令
May 10 #Javascript
AngularJS基础学习笔记之表达式
May 10 #Javascript
AngularJS基础学习笔记之简单介绍
May 10 #Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 #Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
You might like
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP使用数组实现队列
2012/02/05 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
JS 进度条效果实现代码整理
2011/05/21 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
js简单时间比较的方法
2016/08/02 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
Python重新引入被覆盖的自带function
2014/07/16 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
团日活动总结范文
2014/04/25 职场文书
2015年党员承诺书
2015/01/21 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers