html:<html>
<head>
<title></title>
<script type="text/javascript" src="TreeSelector.js"></script>
<script type="text/javascript">
window.onload = function() {
var ts = new TreeSelector("selectTree");//select的id
//id,父id,名称,跳转到url
ts.add('0', '-1', '系统主页', 'http://www.baidu.com/index.html');
ts.add('1', '-1', '批发系统', 'http://www.google.com');
ts.add('2', '1', '前端业务系统');
ts.add('3', '1', '业务监控屏');
ts.add('4', '1', '系统管理');
ts.add('5', '-1', '终端系统');
ts.add('6', '5', '门店');
ts.add('7', '5', '三级站');
ts.add('8', '5', '呼叫中心');
ts.add('9', '5', '管理中心');
ts.add('10', '5', '业务监控屏');
ts.add('11', '5', '系统管理');
ts.add('12', '8', '系统管理2222');
ts.add('13', '12', '系统管理2222');
ts.add('14', '12', '系统管理2222');
//显示
ts.createTree();
}
</script>
</head>
<body>
<!-- onchange="goPage();" -->
<select id="selectTree" ></select>
</body>
</html>
//创建TreeSelector对象
function TreeSelector(item) {
this._data = new Array();
this._item = document.getElementById(item);
this._rootId = -1;// 规定根节点-1
}
// 增加一个节点
TreeSelector.prototype.add = function(_id, _pid, _text, _url) {
this._data[this._data.length] = {
id : _id,
pid : _pid,
text : _text,
url : _url
};
}
// 创建树
TreeSelector.prototype.createTree = function() {
var len = this._data.length;
for ( var i = 0; i < len; i++) {
if (this._data[i].pid == this._rootId) {
this.createSubOption(1, this._data[i]);
}
}
}
// 创建子节点
TreeSelector.prototype.createSubOption = function(level, current) {
var blank = "";
if (level != 1) {
for (a = 0; a < level; a++) {
blank += " ";
}
blank += "├-";
}
this._item.options.add(new Option(blank + current.text, current.id));// 添加Option选项
for ( var j = 0; j < this._data.length; j++) {
if (this._data[j].pid == current.id) {
this.createSubOption(level + 1, this._data[j]);//寻找子节点
}
}
}
大家都说zTree不错，简单看了下，外观比较漂亮，有机会试用下http://www.baby666.cn/v3/demo.php#_508
分享到：
相关推荐
"SelectTree"是一种常见的前端UI组件，用于在网页中实现下拉式的树形结构选择功能。这个控件在很多业务场景中都非常实用，比如在层级数据较多时，它能帮助用户以折叠和展开的方式查看和选择数据，提高用户体验。下面...
Bootstrap Select树形下拉框是一种将传统HTML下拉选择框与树形结构相结合的组件，它使得用户在有限的空间内可以展示层次化的选项，提高了用户体验。Bootstrap Select是基于流行的前端框架Bootstrap开发的，因此它...
此插件是基于elementUI开发的下拉树组件 目前不支持单选,暂只支持多选 安装 npm i ele-tree-select -S 使用 在 main.js 中引入 import EleTreeSelect from 'ele-tree-select' import 'ele-tree-select/lib/ele-tree-...
精选树 ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： ...
2. **指令创建**：AngularJS的强大之处在于它的自定义指令，我们可以创建一个名为`<tree-select>`的指令来实现下拉树。这个指令需要处理节点的展开、折叠、选择和渲染等逻辑。 3. **数据模型**：定义一个数据模型来...
【基于ztree开发的下拉树控件ztree-select】是一种高效的前端UI组件，它结合了ztree的核心特性和下拉菜单的功能，适用于构建具有层级结构的选中项。ztree是一个广泛使用的JavaScript树形插件，而ztree-select则是其...
在IT领域，尤其是在前端开发中，"Select 下拉树 Ztree"是一个常见的需求，它将传统的下拉选择框与树形结构相结合，提供了一种更直观、更方便的方式来选取层级化的数据。ZTree是一款非常流行的JavaScript插件，专门...
本文将详细讲解如何在Bootstrap环境下实现一个带有搜索功能的下拉树插件，并基于`bootstrap-select`和`bootstrap-treeview`两个库进行介绍。 首先，`bootstrap-select`是Bootstrap官方推荐的一个下拉菜单增强插件，...
在这个“bootstrap框架下带搜索功能的下拉树插件”中，我们主要关注两个核心组件：`bootstrap-select`和`bootstrap-treeview`，它们都是Bootstrap生态系统中的扩展插件。 1. **bootstrap-select** `bootstrap-...
rc-树选择React TreeSelect组件屏幕截图发展npm installnpm start例子 在线示例： : 安装 原料药 TreeSelect道具名称描述类型默认班级名称根dom节点的其他CSS类细绳'' 前缀Cls 前缀类细绳'' 动画片下拉动画名称。...
本文将深入探讨如何使用layui实现下拉树，并结合"selectTree.rar"中的示例代码进行解析。 首先，我们需要了解layui的基本用法。layui的核心是模块化设计，每个功能模块都有对应的js和css文件，如layui.all.js包含了...
ngxs-下拉树 带有复选框的 Angular 树视图组件 依赖关系 此组件目前支持 Bootstrap 4。如果您使用的是 Bootstrap 4 alpha 6，请降级到旧版本 1.0.10。 您可以自己自定义 CSS 以分解对 Bootstrap 和 Font Awesome 的...
React下拉树选择React下拉树选择一种轻量级且快速的控件，用于呈现可以显示分层树数据的选择组件。 另外，该控件以药丸形式显示选择，并允许用户搜索选项以进行快速过滤和选择。 还支持显示部分选定的节点。目录随着...
`SelectTree`结合了`Select`的下拉选择功能和`Tree`的层级展示特性，通常用于处理具有层次关系的数据，如组织架构、地区分类等。用户可以通过展开、折叠节点来查看和选择所需项。在`SelectTree`中，我们可以设置不同...
总结，layui树形下拉菜单实例展示了如何利用layui的tree组件创建一个实用的交互式下拉菜单。通过理解初始化、动态赋值和获取选中值的原理，我们可以灵活地构建适应各种场景的应用。这个实例的压缩包文件名“tree”...
总之，"基于z-tree树形结构的多级下拉选择列表"是一种实用的UI设计模式，它将复杂的树状数据结构转换为易于操作的用户界面组件。通过掌握Z-Tree的使用方法，开发者可以创建出高效、直观的多级选择体验，提升用户在...
Ngx树选择特征： 带有“扁平”项目的下拉菜单（与普通选择类似） 带有分层项的下拉菜单简单或多个所选项目使用分层数据，您可以强制选择子项或允许选择父项符合ngModel和标准验证可以限制显示的所选项目（......
数组中的每个元素可以包含 `id`、`text` 和 `children` 等属性，以便正确地构建树形结构。 最后，为了使组件正常工作，你可能还需要在页面的 JavaScript 部分引入对应的库，例如 jQuery 和 Vue.js，并且编写一些 ...
React下拉选择可自定义的下拉菜单用于做出React特征可通过prop s配置通过渲染道具回调（可访问内部道具，状态和方法），所有内部组件的总自定义...通过CSS（或自定义组件）设置样式门户支持在本地DOM树之外呈现下拉菜单...