# tree-multiselect > jQuery multiple select with nested options Latest version **2.6.3** (published 2022-08-23) · MIT license · 0 weekly downloads ## Install ```sh npm install tree-multiselect pnpm add tree-multiselect yarn add tree-multiselect bun add tree-multiselect ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.6.3 | | Published | 2022-08-23 | | First published | 2016-07-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 26.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 223 | | Author | Patrick Tsai | | Maintainers | patosai | | Keywords | tree, multiselect, select, jquery, options, checkbox | ## Links - npm: https://www.npmjs.com/package/tree-multiselect - Repository: https://github.com/patosai/tree-multiselect - Homepage: https://github.com/patosai/tree-multiselect#readme - Issues: https://github.com/patosai/tree-multiselect/issues - npm.io page: https://npm.io/package/tree-multiselect ## Alternatives - [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads - [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads - [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads - [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads - [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads ## Recent versions - 2.6.3 (latest) — 2022-08-23 - 2.6.2 — 2022-08-23 - 2.6.1 — 2019-04-17 - 2.6.0 — 2019-02-12 - 2.5.2 — 2018-05-04 - 2.5.1 — 2017-12-25 - 2.5.0 — 2017-11-02 - 2.4.2 — 2017-11-02 - 2.4.1 — 2017-10-18 - 2.4.0 — 2017-09-25 - 2.3.1 — 2017-07-21 - 2.3.0 — 2017-07-13 - 2.2.1 — 2017-04-28 - 2.2.0 — 2017-04-23 - 2.1.6 — 2017-03-30 - … 10 more at https://npm.io/package/tree-multiselect/versions ## README ## jQuery Tree Multiselect [![CircleCI](https://circleci.com/gh/patosai/tree-multiselect.js.svg?style=svg)](https://circleci.com/gh/patosai/tree-multiselect.js) [![Coverage Status](https://codecov.io/gh/patosai/tree-multiselect.js/branch/master/graph/badge.svg)](https://codecov.io/gh/patosai/tree-multiselect.js) [![devDependency Status](https://david-dm.org/patosai/tree-multiselect.js/dev-status.svg)](https://david-dm.org/patosai/tree-multiselect.js#info=devDependencies) **This plugin allows you to add a sweet treeview frontend to a `` 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 `` in your `` or some of the symbols may look strange. * Requires jQuery v1.8+ ![demo image](demo.jpg "demo image") ### Demo My website has a simple demo running. ### How To Use 1. Set the `multiple="multiple"` attribute on your `` * Make sure your `` nodes. `params` is optional. ```javascript $("select").treeMultiselect(); ``` ```javascript let params = {searchable: true}; $("select").treeMultiselect(params); ``` ```javascript function treeOnChange(allSelectedItems, addedItems, removedItems) { console.log("something changed!"); } $("select").treeMultiselect({ allowBatchSelection: false, onChange: treeOnChange, startCollapsed: true }); ``` ##### Params 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 #### Examples #### `.remove()` Removes the tree from the DOM. Leaves the original `` and call `.reload()` to render the new options. User-changed selections will be saved. ```javascript let trees = $("select").treeMultiselect(); let firstTree = trees[0]; // add an option $("select#id").append(""); 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 `