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

Multi-Select Drop Down Tree Plugin With jQuery - Combo Tree
File Size: 13.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="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
});

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