Select显示多级分类列表

<!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>

Select显示多级分类列表相关推荐

SAP Retail Assortment List - 分类列表
The assortment list provides an overview of the listed assortment. 分类列表为已经列出的分类提供一个总体概览. By using ...
WordPress分类列表函数:wp_list_categories用法及参数详解举例
http://www.511yj.com/wordpress-wp-categories.html 注意: 1. wp_list_categories() 和 list_cats() 以及 wp_li ...
让wordpress首页和分类列表页只显示文章标题列表
http://up2u.72pines.com/2009/07/rangwordpressshouyehefenleiliebiaoyezhixianshiwenzhangbiaotiliebiao/ ...
PHPTree——快速生成无限多级分类
2019独角兽企业重金招聘Python工程师标准>>> 在开发中经常需要用到树形数据,比如无限多级分类,就是典型的树形结构.这里面的算法,用到了递归思想,为了简化开发过程,我编写了一 ...
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言需实现的目标(效果图) 书籍分类展示新书上架展示热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...
Day206.课程分类【导入功能】前端实现、课程分类列表【显示功能】、课程管理【模块需求、添加课程功能】 -谷粒学院
谷粒学院 [课程分类]-导入前端实现一.配置路由 1.添加路由 src/router/index.js //课程分类{path: 'subject',component: Layout,redire ...
wordpress网站分类列表页、详情页、单页、模板
1.公共头部菜单导航 get_header(); 2.wordpress网站面包屑导航 3.wordpress网站侧边栏 4.当前分类顶级分类栏目的分类名_链接(例:当前行业新闻,获取父分类新闻中心栏 ...
Shop项目--12. 显示用户订单列表order_list.jsp
分析: 显示用户订单列表在order_list.jsp页面,要一个功能servlet,把数据传递给前台页面显示.同时要先判断用户是否已经登陆.关键在于数据需要怎么封装,这里涉及多表查询. 1.根据ui ...
tp6中无限极分类里面的获取多级分类数据
作者:陈业贵华为云享专家 51cto(专家博主明日之星 TOP红人) 文章目录前言一.什么是多级分类数据? 二.使用步骤 sql 代码 2.效果图总结前言和大家共同完成获取多级分类数据 ...

Select显示多级分类列表

Select显示多级分类列表相关推荐

最新文章

热门文章