浅谈下拉菜单中的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的网页SELECT下拉框美化代码
Oct 28 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
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
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
python处理大数字的方法
2015/05/27 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python内存管理机制原理详解
2019/08/12 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
python操作cfg配置文件方式
2019/12/22 Python
基于Python fminunc 的替代方法
2020/02/29 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
应用艺术毕业生的自我评价
2013/12/04 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
MySQL 语句执行顺序举例解析
2022/06/05 MySQL