This plugin allows you to replace a select element with a sweet treeview element.
- Requires jQuery v1.8+
- Does not work on IE8. Pull requests welcome!
My website has a simple demo running.
$("select").treeMultiselect();
Make sure your select has the multiple attribute set. Also, make sure you've got <meta charset="UTF-8"> or some of the symbols may look strange.
| Option Attribute name | Description |
|---|---|
data-section (required) |
The section the option will be in; can be nested |
data-description |
A description of the attribute; will be shown on the multiselect |
data-index |
For pre-selected options, display options in this order, lowest index first |
Your data-section can have multiple section names, separated by the sectionDelimiter option.
Ex. data-section="top/middle/inner" will show up as
topmiddleinner- your option
You can pass in options like treeMultiselect(options). It is an object where you can set the following features:
| Option name | Default | Description |
|---|---|---|
allowBatchSelection |
true |
Sections have checkboxes which when checked, check everything within them |
collapsible |
true |
Adds collapsibility to sections |
enableSelectAll |
false |
Enables selection of all or no options |
selectAllText |
Select All |
Only used if enableSelectAll is active |
unselectAllText |
Unselect All |
Only used if enableSelectAll is active |
freeze |
false |
Disables selection/deselection of options; aka display-only |
hideSidePanel |
false |
Hide the right panel showing all the selected items |
onChange |
null |
Callback for when select is changed. Called with (allSelectedItems, addedItems, removedItems), each of which is an array of objects with the properties text, value, initialIndex, and sectionName |
onlyBatchSelection |
false |
Only sections can be checked, not individual items |
sortable |
false |
Selected options can be sorted by dragging (requires jQuery UI) |
sectionDelimiter |
/ |
Separator between sections in the select option data-section attribute |
showSectionOnSelected |
true |
Show section name on the selected items |
startCollapsed |
false |
Activated only if collapsible is true; sections are collapsed initially |
Load jquery.tree-multiselect.min.js on to your web page. The css file is optional (but recommended).
So, you want to exercise your css-fu. Alright then.
The plugin adds a div.tree-multiselect immediately after the specified select. The hierarchy is shown below.
div.tree-multiselectdiv.selections- a lot of
div.section, each of which hasdiv.title, which hasspan.collapse-sectionholding the collapsible indicators if collapsibility is enabledinputof typecheckboxfor selection if allowBatchSelection is enabled- the title text
- a lot of
div.item, containinginputof typecheckboxfor selection- the item text
- and possibly more
div.section
- a lot of
div.selected- a lot of
div.item, each containing...span.remove-selectedholding the indicator to remove element from selection- the option name
span.section-nameifshowSectionOnSelectedis enabled, showing the section name(s)
- a lot of
npm install- Now I hope you've got
grunt-cliinstalled in some place you know about, because we're about to... grunthuff and puffthe tests go- The mettle of your code shall tested in the Battles of QUnit. Shall the dragon be slain and the damsel rescued, from the ashes will rise a green trophy, emblazoned on it the shield of
OK, a legendary paladin enshrined in the kingdom halls. - But that probably won't happen. If not, the Architect will fire up another simulation and you shall patch your hero's weaknesses.
MIT licensed.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent