# jquery_multiselect

> Turn a multiselect list into a nice and easy to use list with checkboxes

Latest version **2.3.9** (published 2017-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install jquery_multiselect
pnpm add jquery_multiselect
yarn add jquery_multiselect
bun add jquery_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.3.9 |
| Published | 2017-05-31 |
| First published | 2017-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | nobleclem |
| Maintainers | nmanandhar |
| Keywords | jquery, MultiSelect, CheckBox |

## Links

- npm: https://www.npmjs.com/package/jquery_multiselect
- Homepage: https://github.com/nobleclem/jQuery-MultiSelect
- npm.io page: https://npm.io/package/jquery_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.3.9 (latest) — 2017-05-31

## README

jQuery MultiSelect
==================

Turn a multiselect list into a nice and easy to use list with checkboxes.

## Demo
http://springstubbe.us/projects/demos/jquery-multiselect/

## Usage
```
$('select[multiple]').multiselect();

$('select[multiple]').multiselect({
    columns: 4,
    texts: {
        placeholder: 'Select options'
    }
});

$('select[multiple]').multiselect('reload');

$('select[multiple]').multiselect( 'loadOptions', [{
    name   : 'Option Name 1',
    value  : 'option-value-1',
    checked: false,
    attributes : {
        custom1: 'value1',
        custom2: 'value2'
    }
},{
    name   : 'Option Name 2',
    value  : 'option-value-2',
    checked: false,
    attributes : {
        custom1: 'value1',
        custom2: 'value2'
    }
}]);
```
*If your list is not visible on page load, add the [jquery.actual](https://github.com/dreamerslab/jquery.actual) plugin to your project.  This will allow proper width calculations to happen.*


### Options
| Option            | Values   | Default        | Description                    |
| ----------------- | -------- | -------------- | ------------------------------ |
| columns           | int      | 1              | # of columns to show options   |
| search            | bool     | false          | enable option search/filering  |
| searchOptions     | object   |                |                                |
| - delay           | int      | 250            | time (in ms) between keystrokes until search happens |
| - showOptGroups   | bool     | false          | show option group titles if no options remaining |
| - onSearch        | function |                | fires before search on options happens |
| texts             | object   |                |                                |
| - placeholder     | string   | Select options | default text for dropdown      |
| - search          | string   | Search         | search input placeholder text  |
| - selectedOptions | string   |  selected      | selected suffix text           |
| - selectAll       | string   | Select all     | select all text                |
| - unselectAll     | string   | Unselect all   | unselect all text              |
| - noneSelected    | string   | None Selected  | None selected text             |
| selectAll         | bool     | false          | add select all option          |
| selectGroup       | bool     | false          | add select all optgroup option |
| minHeight         | number   | 200            | min height of option overlay   |
| maxHeight         | number   | null           | max height of option overlay   |
| showCheckbox      | bool     | true           | display the option checkbox    |
| onLoad            | function |                | fires at end of initial loading, hides native select list |
| onOptionClick     | function |                | fires after on option is clicked |
| onControlClose    | function |                | fires when the options list is closed |
| jqActualOpts      | object   | null           | options for [jquery.actual](https://github.com/dreamerslab/jquery.actual)      |
| optionAttributes  | array    |                | array of attribute keys to copy to the checkbox input |


### Methods
**loadOptions( options, overwrite, updateSelect )**

Update options of select list. Default state will replace existing list with this one.
- *Set the second parameter to `false` to append to the list. (default = true)*
- *Set the third parameter to `false` to leave the native select list as is. (default = true)*

*This will NOT modify the original select list element.*
```
$('select[multiple]').multiselect( 'loadOptions', [{
    name   : 'Option Name 1',
    value  : 'option-value-1',
    checked: false
},{
    name   : 'Option Name 2',
    value  : 'option-value-2',
    checked: false
}]);
```


**settings**

Update Multiselect list settings after it has been rendered.  It accepts the same [options](https://github.com/nobleclem/jQuery-MultiSelect#options) listed above.

*This will reload the plugin for the select list it references*

`$('select[multiple]').multiselect( 'settings', {
    columns: 2
});`

**unload**

Disable the jquery multiselect list and show the native select list.

*This is distructive. You will have to reinitialize with all options to enable the plugin for the list.*

`$('select[multiple]').multiselect( 'unload' );`


**reload**

This is a quick unload/load while maintaining options during plugin initialization.

`$('select[multiple]').multiselect( 'reload' );`


**reset**

Reset the element back to its default selected values.

`$('select[multiple]').multiselect( 'reset' );`


**disable**

Disable or enable the select list. If no second parameter is passed then true is assumed.

`$('select[multiple]').multiselect( 'disable', true );`
`$('select[multiple]').multiselect( 'disable', false );`


### Callbacks
**onLoad**

Fires after initial loading and hides native select list

`onLoad( element )`

element: select list element object


**onOptionClick**

*Fires after an option is clicked*

`onOptionClick( element, option )`

element: select list element object

option:  option element object


**onControlClose**

Fires when the options list is closed

`onControlClose( element )`

element: select list element object


**onSearch**

*Fires before search on options happens*

`searchOptions.onSearch( element )`

element: select list element object

---
_Source: https://npm.io/package/jquery_multiselect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._