<!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树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
NULL 博文链接:https://mr-lili-1986-163-com.iteye.com/blog/1087506
jQuery折叠树形菜单代码基于jquery.1.10.2.min.js制作,带搜索功能,搜索关键字,直接显示菜单项,展开收缩树形菜单。
该文件包含css样式和package.json文件,配合博客《基于angularjs的嵌套指令实现无限级下拉树菜单》使用。
下拉列表以树状结构显示,实用.NET的C# WPF语音结构进行编写,界面简洁,适用作为一个窗体中的下拉控件实用。
Delphi为树控菜单TreeView增加复选框功能,在点击展开的树形菜单节点项前面显示一个复选框,允许用户选择该复选框的内容,可用于设计编写权限设置,注意里面的注释很有价值,对学习Delphi是相当有用的。
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用。 对于没有层级的数据,我们可以使用表格或卡片来展示。要展示或建立层级关系,就一定会...
本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法。分享给大家供大家参考。具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS...
1.完整的包命名空间 2.自定义header footer 3.动态添加节点/动态删除节点/动态...15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现
可编辑树形菜单 - Editable Tree 按钮与布局 链接按钮 - LinkButton 分隔按钮 - SplitButton 简单的布局面板 - EasyLoader 页面布局 - Border Layout 在控制面板上布局 - Border Layout on Panel 控制...
Ajax与ASP网页交互动态添加删除数据一例 Asp+Ajax无限级联动下拉框菜单Access版 ASP 树形菜单TreeView 多样式版 Ajax仿iGoogle双击编辑、网页拖动完整实例 ASP+jQuery无刷新读写数据库操作 Ajax提交数据实例_Ajax+...
用TREEVIEW实现下拉菜单,C#实现,从数据库中读取信息,根据信息逻辑层级关系显示.
我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏。 下面有2种方案来实现这个效果。 1.利用浮动原理 设置下拉框的最大高度为一行的高度,然后超出的部分隐藏。 .ant-select-selection--multiple ...
本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似...
2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3...