javascript实现在下拉列表中显示多级树形菜单的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法。分享给大家供大家参考。具体如下:

这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦。

运行效果截图如下:

javascript实现在下拉列表中显示多级树形菜单的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>在下拉列表中显示的多级树形菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript"> 
var data =new Array(); 
data[0]= {id:'0',pid:'1',text:'河北'}; 
data[1]= {id:'1',pid:'-1',text:'中国'}; 
data[2]= {id:'2',pid:'6',text:'莫斯科'}; 
data[3]= {id:'3',pid:'0',text:'河南'}; 
data[4]= {id:'4',pid:'0',text:'北京'}; 
data[5]= {id:'5',pid:'3',text:'湖南'}; 
data[6]= {id:'6',pid:'-1',text:'俄罗斯'}; 
function TreeSelector(item,data,rootId){ 
this._data = data; 
this._item = item; 
this._rootId = rootId; 
} 
TreeSelector.prototype.createTree = function(){ 
var len =this._data.length; 
for( var i= 0;i<len;i++){ 
if ( this._data[i].pid == this._rootId){ 
this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id)); 
for(var j=0;j<len;j++){ 
this.createSubOption(len,this._data[i],this._data[j]); 
} 
} 
} 
} 
TreeSelector.prototype.createSubOption = function(len,current,next){ 
var blank = ".."; 
if ( next.pid == current.id){ 
intLevel =0; 
var intlvl =this.getLevel(this._data,this._rootId,current); 
for(a=0;a<intlvl;a++) 
blank += ".."; 
blank += "├-"; 
this._item.options.add(new Option(blank + next.text,next.id)); 
for(var j=0;j<len;j++){ 
this.createSubOption(len,next,this._data[j]); 
} 
} 
} 
TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){ 
var pid =currentitem.pid; 
if( pid !=topId) 
{ 
for(var i =0 ;i<datasources.length;i++) 
{ 
if( datasources[i].id == pid) 
{ 
intLevel ++; 
this.getLevel(datasources,topId,datasources[i]); 
} 
} 
} 
return intLevel; 
} 
</script> 
</head>
<body>
<select id="myselect"></select> 
<script language=javascript type="text/javascript"> 
var ts = new TreeSelector(document.getElementById("myselect"),data,-1); 
ts.createTree(); 
</script> 
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Maps Javascript
Jan 22 Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
js密码强度校验
Nov 10 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 #Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 #Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 #Javascript
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
You might like
linux下 C语言对 php 扩展
2008/12/14 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python距离测量的方法
2018/03/06 Python
Python字典遍历操作实例小结
2019/03/05 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
python常量折叠基础知识点讲解
2021/02/28 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
2014年学习雷锋活动总结
2014/03/01 职场文书
大学生评语大全
2014/04/18 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS