Multi-Select Drop Down Tree Plugin With jQuery - Combo Tree
File Size: | 9.8 KB |
---|---|
Views Total: | 72197 |
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="/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, withSelectAll: 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:
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.