# Select-Tree **Repository Path**: leeatao/select-tree ## Basic Information - **Project Name**: Select-Tree - **Description**: 基于Jquery的下拉树插件,根据select的option值,自动组装树结构。 - **Primary Language**: JavaScript - **License**: WTFPL - **Default Branch**: master - **Homepage**: https://gitee.com/leeatao/select-tree - **GVP Project**: No ## Statistics - **Stars**: 35 - **Forks**: 7 - **Created**: 2020-12-07 - **Last Updated**: 2025-01-25 ## Categories & Tags **Categories**: jquery-plugins **Tags**: None ## README # Select-Tree #### 在线预览 [在线预览](http://leeatao.gitee.io/select-tree/select-tree/select-tree.html) #### 介绍 基于Jquery的下拉树插件,根据select的option值,自动组装树结构。可灵活应用于项目中,不需要再单独引用其他插件实现简单的多级下拉选择。 目前支持单选和多选两种模式。 #### 安装教程 1. 下载插件包解压。 2. 将select-tree.js和select-tree.css引入页面。 3. 根据使用示例调用即可。 #### 使用说明 1. 引入js和css文件。 2. 编写原生的select组件满足插件需要的数据元素。 3. 使用jquery绑定插件,实现效果。 #### 使用示例 ``` ``` ``` $("#tree1).selectTree({}); ``` #### 参数配置: selectTree参数: | 参数 | 默认值 | 描述 | | -------------- | ------ | -------------------------------------------------------- | | expandAll | false | 是否展开所有,true时展开所有。 | | expandLevel | 0 | 指定展开的级别,只在expandAll为false时生效。 | | changeCallBack | 无 | 值发生变更时传递的回调函数,回传参数是当前选中的值数组。 | select标签参数: | 参数 | 默认值 | 描述 | | ----------- | ------ | ---------------------------- | | placeholder | 请选择 | 默认选择为空时显示的内容 | | multiple | 无 | 多选属性,存在时实现多选模式 | option标签参数: | 参数 | 默认值 | 描述 | | -------- | ------ | ------------------------------------------------------------ | | value | "" | option的value值,单选模式想让初始化不选择任何值需要添加一个value为“”的选项,value需要保证唯一。存在重复的value时,只有第一条生效。 | | data-pid | 无 | 存放上级的value值,如果值不存在于选项中,当前节点为一级节点。 | | selected | 无 | 存在selected属性时,默认选中该选项。 | | disabled | 无 | 存在该属性时,该选项无法被选择,但是可以操作树的折叠和显示操作。 | 事件: | 方法 | 参数 | 描述 | | ------------- | ----------------------- | ------------------------------------------------------------ | | getSelectInfo | 无 | 获取被选中的对象数组{[value,text]} | | selectOption | String或者Array[String] | 控制选中指定选项,参数传递单选的value值或者多选模式下的value值数组 | | clearSelect | 无 | 清除选中值 | | expandAll | 无 | 展开树的结构 | | collapseAll | 无 | 折叠树的结构 | #### 效果预览 具体查看示例页面 [在线预览](http://leeatao.gitee.io/select-tree/select-tree/select-tree.html)