Tree-style Multi Select Dropdown Plugin For Bootstrap - DropdownTree

DropdownTree is a jQuery plugin that utilizes Bootstrap dropdown component to create a dynamic, multi-level, multi-select dropdown with checkboxes similar to the tree structure.

How to use it:

1. To use this plugin, make sure you have jQuery library, Bootstrap framework and Font Awesome properly loaded in the document.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="font-awesome.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Load the jQuery DropdownTree's JavaScript and CSS files in the document.

<link href="dropdowntree.css" rel="stylesheet">
<script src="dropdowntree.js"></script>

3. Prepare your hierarchical data to be presented in the dropdown tree.

const data = [
      {
        title:"HTML5",href:"#1",
        dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]
      },
      {
        title:"JavaScript",
        href:"#2",
        dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}],
        data:subData
      },
      {
        title:"CSS3",
        href:"#3",
        dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]
      }
];

var subData = [
    {
      title:"jQueryScript",
      href:"#1",
      dataAttrs:[{title:"dataattr1",data:"value1"},{title:"dataattr2",data:"value2"},{title:"dataattr3",data:"value3"}]
    },
    {
      title:"AngularJS",
      href:"#2",
      dataAttrs:[{title:"dataattr4",data:"value4"},{title:"dataattr5",data:"value5"},{title:"dataattr6",data:"value6"}]
    },
    {
      title:"ReactJS",
      href:"#3",
      dataAttrs:[{title:"dataattr7",data:"value7"},{title:"dataattr8",data:"value8"},{title:"dataattr9",data:"value9"}]
    }
];

4. Create a placeholder element for the dropdown tree.

<div class="dropdown dropdown-tree" id="example">

5. Initialize the dropdown tree plugin and specify the data source.

$("#example").DropDownTree({
  data: data
});

6. Config the dropdown tree with the following settings.

$("#example").DropDownTree({

  // dropdown title
  title : "Dropdown",
  
  // close/open icons
  closedArrow : '<i class="fa fa-caret-right" aria-hidden="true"></i>',
  openedArrow : '<i class="fa fa-caret-down" aria-hidden="true"></i>',

  // max height of dropdown
  maxHeight : 300,

  // is multiple select?
  multiSelect : false,

  // checks all children of the selected parent
  selectChildren : false,

  // if the children are dynamic
  addChildren: false,
  
  // if is RTL(RIGHT TO LEFT)?
  rtl: false
  
});

7. Possible event handlers to handle select/check/expand events.

$("#example").DropDownTree({

  clickHandler : function(target){},
  expandHandler : function(target,expanded){},
  checkHandler : function(target,checked){},

});

Changelog:

2020-02-09

• fix click on checkbox on mobile

---

This awesome jQuery plugin is developed by JosephSKh. For more Advanced Usages, please check the demo page or visit the official website.