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 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
node.js require() 源码解读
Dec 13 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python yield 小结和实例
2014/04/25 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python初学者常见错误详解
2019/07/02 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
连带责任保证书
2014/04/29 职场文书
体育馆的标语
2014/06/24 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书