tree-multiselect
Advanced tools
Readme
This plugin allows you to add a sweet treeview frontend to a <select> node.
The underlying <select> node can be used as it was before. This means you can still use $("select").val() or selectElement.value to get the value, as if there was no plugin. If you want to add options dynamically, please continue reading, there are some more steps you need to take.
<meta charset="UTF-8"> in your <head> or some of the symbols may look strange.
My website has a simple demo running.
multiple="multiple" attribute on your <select><option> nodes$.treeMultiselect(params) with whatever params you want<select><select> has the multiple attribute set.The <option> children can have the following attributes.
| Option Attribute name | Description |
|---|---|
selected | Have the option pre-selected. This is actually part of the HTML spec. For specified ordering of these, use data-index |
readonly | User cannot modify the value of the option. Option can be selected (ex. <option selected readonly ...) |
data-section | 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. Repeated items with the same index will be shown before items with a higher index. Otherwise items will be displayed in the order of the original <select> |
All of the above are optional.
Your data-section can have multiple section names, separated by the sectionDelimiter option. If you don't have a data-section on an option, the option will be on the top level (no section).
Ex. data-section="top/middle/inner" will show up as
top
middle
inner
$.treeMultiselect(params)Renders a tree for the given jQuery <select> nodes. params is optional.
$("select").treeMultiselect();
let params = {searchable: true};
$("select").treeMultiselect(params);
function treeOnChange(allSelectedItems, addedItems, removedItems) {
console.log("something changed!");
}
$("select").treeMultiselect({
allowBatchSelection: false,
onChange: treeOnChange,
startCollapsed: true
});
| 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 |
maxSelections | 0 | A number that sets the maximum number of options that can be selected. Any positive integer is valid; anything else (such as 0 or -1) means no limit |
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 section |
onlyBatchSelection | false | Only sections can be checked, not individual items |
sortable | false | Selected options can be sorted by dragging (requires jQuery UI) |
searchable | false | Allows searching of options |
searchParams | ['value', 'text', 'description', 'section'] | Set items to be searched. Array must contain 'value', 'text', or 'description', and/or 'section' |
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 |
.remove()Removes the tree from the DOM. Leaves the original <select> intact.
let trees = $("select").treeMultiselect({searchable: true});
let firstTree = trees[0];
firstTree.remove();
.reload()Reinitializes the tree. You can add <option> children to the original <select> and call .reload() to render the new options. User-changed selections will be saved.
let trees = $("select").treeMultiselect();
let firstTree = trees[0];
// add an option
$("select#id").append("<option value='newValue' data-section='New Section' selected='selected' data-description='New value'>New Value</option>");
firstTree.reload();
Load jquery.tree-multiselect.min.js on to your web page. The css file is optional (but recommended).
You can also use bower - bower install tree-multiselect
You need to have grunt-cli installed so you can run the grunt command.
grunt or grunt testgrunt buildgrunt sassgrunt releaseHelp! The first element is selected when I create the tree. How do I make the first element not selected?
You didn't set the multiple attribute on your <select>. This is a property of single-option select nodes - the first option is selected.
MIT licensed.
FAQs
jQuery multiple select with nested options
The npm package tree-multiselect receives a total of 427 weekly downloads. As such, tree-multiselect popularity was classified as not popular.
We found that tree-multiselect demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.