You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

tree-multiselect

Package Overview
Dependencies
0
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

tree-multiselect

jQuery multiple select with nested options


Version published
Weekly downloads
644
increased by13.18%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

jQuery Tree Multiselect

CircleCI Coverage Status devDependency Status

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.

  • Make sure you've got <meta charset="UTF-8"> in your <head> or some of the symbols may look strange.
  • Requires jQuery v1.8+

demo image

Demo

My website has a simple demo running.

How To Use

  1. Set the multiple="multiple" attribute on your <select>
  2. Add attributes to <option> nodes
  3. Execute $.treeMultiselect(params) with whatever params you want

Setting up your <select>

  • Make sure your <select> has the multiple attribute set.

The <option> children can have the following attributes.

Option Attributes
Option Attribute nameDescription
selectedHave the option pre-selected. This is actually part of the HTML spec. For specified ordering of these, use data-index
readonlyUser cannot modify the value of the option. Option can be selected (ex. <option selected readonly ...)
data-sectionThe section the option will be in; can be nested
data-descriptionA description of the attribute; will be shown on the multiselect
data-indexFor 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
        • your option

API

$.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
});
Params
NameDefaultDescription
allowBatchSelectiontrueSections have checkboxes which when checked, check everything within them
collapsibletrueAdds collapsibility to sections
enableSelectAllfalseEnables selection of all or no options
selectAllTextSelect AllOnly used if enableSelectAll is active
unselectAllTextUnselect AllOnly used if enableSelectAll is active
freezefalseDisables selection/deselection of options; aka display-only
hideSidePanelfalseHide the right panel showing all the selected items
maxSelections0A 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
onChangenullCallback 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
onlyBatchSelectionfalseOnly sections can be checked, not individual items
sortablefalseSelected options can be sorted by dragging (requires jQuery UI)
searchablefalseAllows 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
showSectionOnSelectedtrueShow section name on the selected items
startCollapsedfalseActivated only if collapsible is true; sections are collapsed initially
Examples
.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();

Installation

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

How to build

You need to have grunt-cli installed so you can run the grunt command.

  • Run tests: grunt or grunt test
  • Build dist JavaScript file: grunt build
  • Build Sass: grunt sass
  • Build everything: grunt release

FAQ

Help! 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.

License

MIT licensed.

Keywords

FAQs

Package last updated on 23 Aug 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc