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

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="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/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">

$('#example').comboTree({
  source : myData
});

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

$('#example').comboTree({
  source : myData,
  isMultiple: true
});

6. Set the pre-select items.

$('#example').comboTree({
  source : myData,
  selected: ['0']
});

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

$('#example').comboTree({
  source : myData,
  cascadeSelect: true
});

8. Collapse sub-tree on init. Default: false.

$('#example').comboTree({
  source : myData,
  collapse: true
});

9. Select the last node and skip its parent on click. Default: false.

$('#example').comboTree({
  source : myData,
  selectableLastNode: true
});

10. Display a 'Select All' checkbox inside the dropdown. Default: false.

$('#example').comboTree({
  source : myData,
  selectAll: true,
});

11. Determine whether to set parent's class according to parent's attribute.

$('#example').comboTree({
  source : myData,
  isolatedSelectable: true,
});

12. Get the selected nodes.

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

instance.getSelectedNames();
instance.getSelectedIds();

13. Set/clear selections.

// set source
instance.setSource(source);

// clear selection
instance.clearSelection();

// select all items.
instance.selectAll();

// set selection
instance.setSelection(selectionIdList):

14. Destroy the instance.

instance.destroy();

15. Trigger an event after selection.

onChange(callBackFunction)

Changelog:

2023-11-14

• withSelectAll conf name changed to selectAll

v1.3.1 (2023-11-05)

• Removed icontains.js dependency
• Refactoring JS and CSS.
• Many bugs resolved on both UI and Functionality sides.

2022-10-08

• Update the classname of the arrow down icon 

2022-10-08

• Add feature isolated "selectable"

2022-10-03

• Added select all feature

2022-08-10

• Obey cascadeSelect configuration in setSelection()

2022-02-05

• Collapse node from start

2020-07-03

• Fixed Compatibility Issue with Internet Explorer

2020-04-15

• Added new option 'selectableLastNode'

2020-01-30

• Fix: setSelection doesn't work for singleselection mode

2019-12-30

• new version

2019-11-11

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

2019-11-08

• Fix processSelected

2019-10-17

• Fixed showing a blank input when using the default selected

2019-09-20

• Add cascade selection to multiple selection

2019-09-05

• JS Updated

---

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