# 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绑定插件，实现效果。
#### 使用示例

```
<select placeholder="请选择组织架构" id="tree1" name="tree1">
            <option value=""></option>
            <option value="1" data-pid="0">一级节点1</option>
            <option value="12" data-pid="1">子节点12</option>
            <option value="123" data-pid="12">子节点123</option>
            <option value="13" data-pid="1">子节点13</option>
            <option value="131" data-pid="13">子节点131</option>
            <option value="132" data-pid="13">子节点132</option>
            <option value="133" data-pid="13">子节点13</option>
            <option value="134" data-pid="13">子节点134</option>
            <option value="135" data-pid="13">子节点135</option>
            <option value="1341" data-pid="134">子节点1341</option>
            <option value="2" data-pid="0">一级节点2</option>
            <option value="3" data-pid="0">一级节点3</option>
            <option value="21" data-pid="2">子节点21</option>
        </select>

```

```
 $("#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)