Multi-Select Drop Down Tree Plugin With jQuery - Combo Tree

Multi-Select Drop Down Tree Plugin With jQuery - Combo Tree
File Size: 9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Combo Tree is a jQuery plugin to render a single or multi-select dropdown list from JSON data that enables the user to select one or multiple options from a hierarchical, collapsible tree view with checkboxes.

How to use it:

1. Insert the comboTreePlugin.js script after jQuery library.

<script src="" 
<script src="comboTreePlugin.js"></script>

2. Insert the icontains.js script if you want to enable the autocomplete/filter functionality on the dropdown tree.

<script src="icontains.js"></script>

3. Define your own hierarchical data as these:

var myData = [
      id: 0,
      title: 'Item 1 '
    }, {
      id: 1,
      title: 'Item 2',
      subs: [
          id: 10,
          title: 'Item 2-1'
        }, {
          id: 11,
          title: 'Item 2-2'
        }, {
          id: 12,
          title: 'Item 2-3'
    }, {
      id: 2,
      title: 'Item 3'
    // more data here

4. Attach the dropdown tree to a regular input field and done.

<input type="text" id="example" placeholder="Select">
  source : myData

5. Enable the multi-select functionality on the dropdown tree.

  source : myData,
  isMultiple: true

6. Set the pre-select items.

  source : myData,
  selected: ['0']

7. Determine whether the parent selection should cascade to children in multiple selection. Default: false.

  source : myData,
  cascadeSelect: true

8. Get the selected itmes.

var instance = $('#example').comboTree({
    source : myData


9. Destroy the instance.




  • Fix: setSelection doesn't work for singleselection mode


  • new version


  • Setting type attribute on button element prevents submission when this input is used within a form.


  • Fix processSelected


  • Fixed showing a blank input when using the default selected


  • Add cascade selection to multiple selection


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