<!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">
<!--把下面代码加到<head>与</head>之间-->
<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: '俄罗斯'};
data[7] = {id: '7',pid: '1',text: '湖南'};
data[8] = {id: '8',pid: '7',text: '益阳'};
data[9] = {id: '9',pid: '8',text: '南县'};
data[10] = {id: '10',pid: '9',text: '茅草街'};
data[11] = {id: '11',pid: '10',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>
<!--把下面代码加到<body>与</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>
http://blog.163.com/wm_at163/blog/static/132173490201062574052677/
分享到：
相关推荐
在Bootstrap中，下拉框（Dropdown）是一种常见的交互元素，而"bootstrap树形下拉框 下拉框树形菜单（修改版）"则是将传统的下拉菜单与树形结构相结合，以提供更复杂的选项选择体验。 在Web开发中，有时我们需要在一...
"bootstrap树形下拉框 下拉框树形菜单"是指在Bootstrap的上下文菜单（Dropdown）中集成一个树形结构，使得用户可以在下拉选项中进行多级选择，这种功能在数据分类或层级关系展示时非常实用。 在Bootstrap中，下拉框...
通过阅读和理解"ComboTree.js"文件的代码，你可以掌握如何在EXT应用程序中实现下拉框显示树形结构的功能，这将对你的EXT开发技能有所提升。同时，也可以根据实际需求调整代码，实现更复杂的交互和定制化功能。
在这个下拉框树形菜单中，jQuery负责处理用户交互、DOM操作和数据传输。 2. **下拉框**：在HTML中，通常使用`<select>`标签来创建下拉菜单。但在本例中，由于需要实现树形结构，所以会用自定义的HTML元素和CSS来...
树形控件在文件管理器、组织架构、菜单系统等方面有着广泛的应用。 "下拉框"，又称下拉列表，通常用于提供一组预定义的选项供用户选择。用户点击后，会显示一个包含多个选项的列表，用户可以直接从中选取。下拉框...
在网页设计中，jQuery下拉框树形...通过熟练掌握这些知识，开发者可以构建出高效且用户体验良好的树形菜单选择功能。在这个压缩包文件"jiaoben6665"中，很可能包含了实现这一功能的源代码，可以作为学习和参考的实例。
在网页开发中，"JS实现下拉框树形"是一种常见的交互设计，它结合了下拉框和树形结构的特点，使得用户可以在一个下拉菜单中以层级方式浏览和选择数据。这种技术常用于需要展示多级分类或者层级关系的场景，如地区选择...
本文将详细解析"js css jquery 树形菜单 级联下拉框 自动弹出菜单 导航栏 跑马灯 js特效"这一主题中的各个知识点，帮助你理解和应用这些技术。 1. **JavaScript**: JavaScript是一种轻量级的解释型编程语言，主要...
3. **CComboBox派生类**：为了实现自定义功能，开发者可能会创建一个新的CComboBox派生类，并重写其OnDropDown()方法，以便在下拉时显示树形菜单。同时，可能还需要处理WM_VSCROLL消息，以便在用户滚动树形视图时...
在Android开发中，`android.widget.ExpandableListView`是一个非常重要的控件，它允许我们创建树形结构的菜单，通常用于展示层次清晰的数据。这个控件不仅提供了基本的列表视图功能，还支持子项的展开和折叠，使得...
在IT领域，树形菜单结构是一种常见的用户界面元素，尤其在数据组织和导航中非常有用。这个名为"树形菜单结构-1"的项目显然关注的是实现一个具有动态特性的树形菜单，允许用户交互地操作菜单节点。下面将详细讨论相关...
在网页设计中，树形下拉菜单是一种常见的交互元素，它可以帮助用户在多级结构的数据中进行导航。本文将详细讲解如何创建一个“最简单树形下拉菜单”，以及实现这个功能所需的关键技术。 首先，我们需要理解树形下拉...
《jQuery折叠树形菜单代码详解》 在网页开发中，导航菜单是不可或缺的一部分，它能够帮助用户快速定位和访问网站内容。本篇文章将深入解析基于jQuery实现的折叠树形菜单代码，结合“jQuery折叠树形菜单代码.zip”...
接下来是TreeView控件，它是WPF中用于显示树形结构数据的控件。每个节点可以有子节点，形成层次结构。在本案例中，TreeView被用作数据源，提供树状结构的数据。 实现下拉列表树状结构显示的关键步骤如下： 1. **...
本项目是一个基于jQuery实现的下拉框树形结构菜单，允许用户进行单选或多选操作，并且具备可伸缩性，能够通过回调方法获取用户选定的值。 首先，我们要理解jQuery是什么。jQuery是一个快速、简洁的JavaScript库，它...
CSS（Cascading Style Sheets）代码用于美化树形菜单，确保其具有良好的视觉效果和一致的设计风格。这包括设置字体、颜色、间距和动画效果等。 #### 七、生成树形结构的Servlet或Action 为了动态生成树形结构的...
树形下拉框是一种在用户界面设计中常见的交互元素，特别是在网页和应用程序中。它结合了传统的下拉菜单和树状结构，使得用户能够在选择一个单一选项的同时，还能浏览和选择层级关系的数据。这种控件通常用于显示具有...
在本文中，我们将深入探讨如何使用layui框架中的tree模块创建一个功能完备的树形下拉菜单。layui是一款轻量级的前端UI框架，它提供了丰富的组件和API，使得开发者能够快速构建美观且响应式的Web应用。在“layui树形...
在本文中，我们将深入探讨如何在AngularJS框架中实现下拉树控件，这是一种结合了树形结构和下拉选择功能的用户界面组件。AngularJS是Google开发的一个强大的前端JavaScript框架，它允许开发者构建可维护、可扩展的...