Tree Multiselect是一个jQuery插件，它可以将多选框转换为带有复选框的可折叠树状视图，以便轻松选择选项。用户可以在展开视图中删除所选项目中的选择，也可以取消选中选择选项。

安装：

# Yarn
$ yarn add tree-multiselect

# NPM
$ npm install tree-multiselect --save

如何使用它:

1.在html页面上包含jQuery库和jQuery树多选插件的JS和CSS文件。

<link href="jquery.tree-multiselect.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.tree-multiselect.min.js"></script>

2.包括用于拖放支持的jQuery UI库。

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

3.创建一个多选并使用数据部分来指定每个选项的层次结构。

<select id="demo" multiple="multiple">
  <option value="one" data-section="top" selected="selected" data-index="3">C++</option>
  <option value="two" data-section="top" selected="selected" data-index="1">Python</option>
  <option value="three" data-section="top" selected="selected" data-index="2">Ruby</option>
  <option value="four" data-section="top">Swift</option>
  <option value="wow" data-section="JavaScript/Library/Popular">jQuery</option>
</select>

4.初始化插件。

$("#demo").treeMultiselect(options);

5.可能的插件选项。

$("#demo").treeMultiselect({

  // Sections have checkboxes which when checked, check everything within them
  allowBatchSelection: true,

  // Selected options can be sorted by dragging 
  // Requires jQuery UI
  sortable: false,

  // Adds collapsibility to sections
  collapsible: true,

  // Enables selection of all or no options
  enableSelectAll: false,

  // Only used if enableSelectAll is active
  selectAllText: 'Select All',

  // Only used if enableSelectAll is active
  unselectAllText: 'Unselect All',

  // Disables selection/deselection of options; aka display-only
  freeze: false,

  // Hide the right panel showing all the selected items
  hideSidePanel: false,

  // max amount of selections
  maxSelections: 0,

  // Only sections can be checked, not individual items
  onlyBatchSelection: false,

  // Separator between sections in the select option data-section attribute
  sectionDelimiter: '/',

  // Show section name on the selected items
  showSectionOnSelected: true,

  // Activated only if collapsible is true; sections are collapsed initially
  startCollapsed: false,

  // Allows searching of options
  searchable: false,

  // Set items to be searched. Array must contain 'value', 'text', or 'description', and/or 'section'
  searchParams: ['value', 'text', 'description', 'section'],

  // Callback
  onChange: null
  
});

更新日志：

v2.6.3版本（2022-08-24）

• 修复了提供空字符串作为搜索查询时的断言错误

v2.6.1版本（2019-04-17）

• 修复了冻结时分区复选框的显示状态。它们现在显示为不确定、已检查或空，就像未冻结时一样。

v2.6.0版本（2019-02-12）

• 重新进行搜索以获得更好的抽象，并修复全选错误

v2.5.2版本（2018-05-04）

• 重新进行搜索以获得更好的抽象，并修复全选错误

v2.5.1版本（2017-12-25）

• 添加最大选择选项

v2.5.0版本（2017-11-02）

• 数据索引仅在选择项目时选择

v2.4.3版本（2017-11-02）

• 不覆盖重复索引上的数据索引

v2.4.1版本（2017-10-19）

• 修复一些CSS问题

v2.4.0版本（2017-09-26）

• 使用只读而不是禁用，因为禁用不会发送值

v2.3.0版本（2017-04-29）

• 树木可以重新加载和移除

v2.2.1版本（2017-04-29）

• JS更新

v2.2.0版本（2017-04-24）

• 截面复选框返回值清除，UiBuilder一次全部附加

v2.1.6版本（2017-03-31）

• 修复node.remove（）以支持IE

v2.1.4版本（2017-03-18）

• 搜索时展开所有搜索结果

v2.1.3版本（2017-01-03）

• 添加搜索参数

v2.1.2版本（2016年12月26日）

• 更新0页边距的搜索栏

v2.0.2版本（2016年11月23日）

• 修复单个页面上多个树的唯一ID

v2.0.0版本（2016-10-30）

• 修复CSS以反映点击标签复选框

v1.18.0（2016年10月19日）

• JS更新

v1.17.2（2016年7月13日）

• 添加输入复选框样式

v1.17.1（2016年6月26日）

• 添加输入复选框样式

v1.17.1（2016年4月16日）

• 更新js以包含select all文本选项

v1.17.0（2016年4月15日）

• 全选/取消全选的样式有点完整

v1.16.0（2015年12月21日）

• 为onChange添加回调

v1.15.3（2015年12月18日）

• 不要将call用于“严格使用”目的
• 更多重构
• 移除炖锅实验室并更换为IE8免责声明

v1.15.2（2015年12月1日）

• 仅为批次选择添加选项

v1.15.0（2015年11月24日）

• 为原始选择添加更改事件激发

v1.15.0（2015年10月27日）

• 添加隐藏所选项目侧板的功能

v1.14.4（2015年9月10日）

• 冻结时不允许分拣
• 修复多次执行treeMultiselect（）会更改选项的错误

v1.14.3（2015年8月29日）

• 修复选项值中的数字无法添加的问题

v1.14.1（2015年8月29日）

• 向标题复选框添加不确定标记

v1.14.0（2015年8月27日）

• 使现代化

v1.13.1（2015年8月25日）

• 通过字符串比较修复初始排序

v1.13.0（2015年8月23日）

• CSS光标现在总是“抓取”，即使添加了新项目
• 父节现在自动检查是否选择了所有子节
• 更改选定的节名称跨度名称样式以与其他节对齐

预览截图

多选树结构 jQuery插件 树多选