<!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:'3',text:'莫斯科'};
data[3]= {id:'3',pid:'0',text:'邯郸'};
data[4]= {id:'4',pid:'0',text:'石家庄'};
data[5]= {id:'5',pid:'2',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>
分享到：
相关推荐
"bootstrap树形下拉框 下拉框树形菜单"是指在Bootstrap的上下文菜单（Dropdown）中集成一个树形结构，使得用户可以在下拉选项中进行多级选择，这种功能在数据分类或层级关系展示时非常实用。 在Bootstrap中，下拉框...
在Bootstrap中，下拉框（Dropdown）是一种常见的交互元素，而"bootstrap树形下拉框 下拉框树形菜单（修改版）"则是将传统的下拉菜单与树形结构相结合，以提供更复杂的选项选择体验。 在Web开发中，有时我们需要在一...
"部门或人员下拉框树形"是一种常见的UI元素，它将传统的下拉框与树形结构相结合，以提供更直观、高效的筛选和选择体验。这个设计尤其适用于组织结构复杂、部门或人员众多的企业系统，用户可以通过展开和折叠节点来...
这个组件是基于流行的前端框架Bootstrap和JavaScript库构建的，使得在网页设计中实现树形下拉框变得简单高效。 在Bootstrap中，树形下拉框主要依赖于`bootstrap-treeview.js`这个JavaScript插件，它扩展了Bootstrap...
总的来说，"结合ztree的下拉框树形结构数据多选，单选"是一个涉及到前端开发中JavaScript交互设计、数据处理和用户界面优化的重要知识点。通过理解并熟练运用zTree这个工具，开发者能够创建出功能强大且用户体验良好...
在网页开发中，"JS实现下拉框树形"是一种常见的交互设计，它结合了下拉框和树形结构的特点，使得用户可以在一个下拉菜单中以层级方式浏览和选择数据。这种技术常用于需要展示多级分类或者层级关系的场景，如地区选择...
在网页设计中，jQuery下拉框树形分类菜单选择代码是一种常见的交互元素，它将传统的下拉菜单与树形结构相结合，提供了一种更高效、更直观的方式来展示和选择分类数据。这种技术常用于需要多级分类或者层级关系明确的...
这个"jQuery下拉框树形分类菜单选择代码.zip"压缩包提供了一个功能丰富的解决方案，用于创建交互式的下拉框树形菜单，这在数据分类和筛选时非常有用，比如在网站的导航或表单中。 该压缩包包含以下关键组件： 1. *...
在网页设计中，jQuery下拉框树形结构菜单选择代码是一种常见的交互元素，它将传统的单选或复选框转化为可折叠的树形结构，提高了用户界面的易用性和美观性。这种效果常用于需要展示层级关系的数据选择，如地区选择、...
在这种情况下，“带树形显示的下拉框”是一种很好的解决方案，它将传统的下拉框与树形视图的功能相结合，允许用户以更直观的方式浏览和选择数据。下面我们将深入探讨这个主题。 1. **控件设计** - **自定义控件**...
完善的树形下拉框功能，根据自定义层级规则展开，可以直接嵌入项目，还附带两个漂亮的登录界面； 更多介绍：https://blog.csdn.net/weixin_43151418/article/details/124689160
功能描述：可编辑表格，可新增行，可删除行，可触发表单校验，可设置下拉框树形选择器多选文本框等格式，可编辑表格可设置编辑和只读两种状态 适用人群：具备一定编程基础，工作1-3年的前端研发人员 适用场景：...
通过分析和研究这些文件，开发者可以学习如何实现一个具有树形结构的下拉框，以及如何将其集成到自己的.NET应用程序中。 总的来说，"ComboxTree"是C#中一个增强型的ComboBox控件，它实现了树形结构的显示，为用户...
C# winform 自定义控件 下拉框树结构 且可以选中（免积分下载） 详情请看我的文章介绍，有图片效果展示 ：https://blog.csdn.net/m0_65636467/article/details/132711246
而在某些情况下，我们可能需要在下拉框中展示树形结构的数据，这就是EXT COMBO TREE的用武之地。 EXT COMBO TREE是EXT COMBO的一种扩展，它允许用户在下拉菜单中以树形结构展示数据。这在处理层级关系或者分类数据...
根据给定的信息，“树形下拉框.NET”主要涉及如何在.NET框架中通过树形下拉框（Tree Dropdown）来展示组织结构中的部门或岗位层级关系。下面将详细阐述这一技术实现过程及其背后的关键概念。 ### 一、树形下拉框的...
### JSP自定义标签——树形下拉选择菜单解析 #### 一、概念与应用场景 在JSP（Java Server Pages）开发中，自定义标签是一种非常实用的技术，它允许开发者创建可重用的代码组件，简化JSP页面的编写工作。本文档将...