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

Multi-Select Drop Down Tree Plugin With jQuery - Combo Tree
File Size: 9.41 KB
Views Total: 36424
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="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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">
$('#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. Get the selected nodes.

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

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

11. Set/clear selections.

// set source
instance.setSource(source);

// clear selection
instance.clearSelection();

// set selection
instance.setSelection(selectionIdList):

11. Destroy the instance.

instance.destroy();

12. Destroy the instance.

instance.destroy();

Changelog:

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


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