<!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[]= {id:'',pid:'',text:'河北'};

data[]= {id:'',pid:'-1',text:'中国'};

data[]= {id:'',pid:'',text:'莫斯科'};

data[]= {id:'',pid:'',text:'河南'};

data[]= {id:'',pid:'',text:'北京'};

data[]= {id:'',pid:'',text:'湖南'};

data[]= {id:'',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= ;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=;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 =;

var intlvl =this.getLevel(this._data,this._rootId,current);

for(a=;a<intlvl;a++)

blank += "..";

blank += "├-";

this._item.options.add(new Option(blank + next.text,next.id));

for(var j=;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 = ;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,-);

ts.createTree();

</script>

</body>

</html>

Select显示多级分类列表的更多相关文章

  1. 在DropDownList里显示多级分类

    protected void ddlBind() { DataTable dt = new DataTable(); ddlCategoryId.DataSource = getList(" ...

  2. Hexo主题实现多级分类显示

    前言 最近在搞一个博客,是托管在github和gitcafe上的,利用Hexo生成的.之后,发现一个问题,显示的分类都是一级的.而我想要的是:能显示多级分类,层次分明`的那样. 问题 基本主题自带的分 ...

  3. WordPress分类列表函数:wp_list_categories用法及参数详解举例

    http://www.511yj.com/wordpress-wp-categories.html 注意: 1. wp_list_categories() 和 list_cats() 以及 wp_li ...

  4. magento简化url多级分类去掉父目录

    在Magento模板开发中,有时候需要将多级分类的url简化,Magento的URL默认是显示多级分类的http://afish.cnblogs.com/分类1/分类2/分类3现在需要简化为:分类2的 ...

  5. 在Vue中使用iview的Select控件实现一个多级选项列表

    前言 今天项目要实现一个多级选项列表,发现iview官网上没有写这个例子,于是自己就实现了,如果对你有帮助请点个赞 ‘ * ’!! 解决方法:下面我们就来使用V-for 来定义一个二级选项列表 ,代码 ...

  6. SQLite中使用CTE巧解多级分类的级联查询

    在最近的项目中使用ActiveReports报表设计器设计一个报表模板时,遇到一个多级分类的难题:需要将某个部门所有销售及下属部门的销售金额汇总,因为下属级别的层次不确定,所以靠拼接子查询的方式显然是 ...

  7. ECSHOP任意页面显示指定分类、数量、排序的任意类型文章，包括只显示置顶or普通的文章

    1.在需要使用此功能的PHP页面里最后的?>前面添加以下代码,现在以article.php为例子 /** jinmozhe 专业ECSHOP二次开发 * 获得指定分类ID.文章类型.指定数量.排 ...

  8. EXCEL中多级分类汇总空白字段填充

    使用场景,多级分类汇总后,在汇总的字段中显示空白,这样对我们直接取值做表带来十分不更(假像有5000条记录,1000条汇总项) 相关技术,INDIRECT函数,单元格定位功能. 在数据区域外任意一个单 ...

  9. 常用分类列表wp_list_categories()

    使用: <ul> <?php $args= array( 'depth'=>1, 'orderby'=>id, 'style'=>none ); wp_list_c ...

随机推荐

  1. Hibernate 、 Axis2发布

    1. you just compile your web-service into aar file (not include bean files), copy the aar into axis2 ...

  2. Java Socket 编程之Socket与ServerSocket的区别

    http://www.cnblogs.com/hq-antoine/archive/2012/02/11/2346474.html 1.1 ServerSocket类    创建一个ServerSoc ...

  3. Google Map 学习过程中的代码

    <!DOCTYPE html><html> <head> <title>Simple click event</title> <met ...

  4. oc字符串的用法

    #import <UIKit/UIKit.h> #import "AppDelegate.h" int main(int argc, char * argv[]) { ...

  5. php model与json_encode/json_decode

    常用于model的操作,看看就知道了 <?php class UserModel { var $user_id = 0; var $user_name = ''; var $user_email ...

  6. JavaScript使用小技巧

    原文:45 Useful JavaScript Tips, Tricks and Best Practices作者:Saad Mousliki 在这篇文章里,我将分享一些JavaScript的技巧.秘 ...

  7. WPF控件TreeView使用

    需要多级嵌套要用TreeViewItem,而这个在大纲视图右键控件可以点出来. 代码控制嵌套Items就可以. 如果显示"(集合)",检查嵌套的是不是TreeViewItem的It ...

  8. 批处理学习笔记11 - del命令和rd命令

    这两个命令都是删除,所以放一块说了 del 删除文件 rd 删除目录(文件夹) ------------------------------------------------------------ ...

  9. Java8 新特性简介

    Java8是2014年发布的,至今也已经有快三年的时间了,之前虽然有学习过,但是学的比较零散,不成系统,而且也没有覆盖到Java8所有的特性. 由于公司已经使用了JDK1.8,所以工作中能使用Java ...

  10. JVM调优总结 + jstat 分析

    jstat -gccause pid 1 每格1毫秒输出结果jstat -gccause pid 2000 每格2秒输出结果不断的在屏幕打印出结果   S0     S1     E      O   ...