and turns it into: ``` html ``` ### The Basics2 Multiple Select can take a regular select box like this:
and turns it into: ``` html ``` ### The Basics3 Multiple Select can take a regular select box like this:
and turns it into: ``` html ``` ### With Optgroups1 Multiple Select can take a regular select box like this:
and turns it into: ``` html ``` ### With Optgroups2 Multiple Select can take a regular select box like this:
and turns it into: ``` html ``` ### The Placeholder
``` html ``` ### The Multiple Items Multiple Select supports to show multiple items in single row.
``` html ``` ### With Optgroups Multiple Select supports to show multiple items in single row with optgroups.
``` html ``` ### The Hide Select All
``` html ``` ### The Single Row
``` html ``` ### The Position Set the select dropdown in top position.
``` html ``` ### The Filter1
``` html ``` ### The Filter2
``` html ``` ### The Keep Open
``` html ``` ### The Styler Custom the item style.
``` html ``` ### SetSelects/GetSelects
``` html ``` ### Enable/Disable
``` html ``` ### CheckAll/UncheckAll
``` html ``` ### Focus/Blur
``` html ``` ### The Refresh Reloads the Multiple Select. If you're dynamically adding/removing option tags on the original select via AJAX or DOM manipulation methods, call refresh to reflect the changes.
``` html
Here is the result of event.
``` html
Here is the result of event.
``` ## Documentation ### Constructor #### isOpen Type: boolean Whether or not Multiple Select open the select dropdown. By default this option is set to ```false```. #### placeholder Type: string A placeholder value can be defined and will be displayed until you select a item. By default this option is set to ```''```. #### selectAll Type: boolean Whether or not Multiple Select show select all checkbox. By default this option is set to ```true```. #### selectAllText Type: string Multiple Select select all checkbox text. By default this option is set to ```Select all```. #### selectAllDelimiter Type: Array Multiple Select select all checkbox delimiter. By default this option is set to ```['[',']']```. #### allSelected Type: false or string The text displays when the select all selected. By default this option is set to ```All selected```. #### minimumCountSelected Type: int ```countSelected``` will be shown only if more than X items where selected. By default this option is set to ```3```. #### countSelected Type: false or string '#' is replaced with the count of selected items, '%' is replaces with total items. By default this option is set to ```# of % selected```. #### etcaetera Type: boolean Add "..." after selected options if minimumCountSelected is set. Overrides countSelected option. By default this option is set to ```false```. #### multiple Type: boolean Whether or not Multiple Select show multiple items in a row. By default this option is set to ```false```. #### multipleWidth Type: integer Multiple Select show multiple items width. By default this option is set to ```80```. #### single Type: boolean Whether or not Multiple Select allows you to select only one option. By default this option is set to ```false```. #### position Type: string Defines the position of select dropdown, can only be ```bottom``` or ```top```. By default this option is set to ```bottom```. #### filter Type: boolean Whether or not Multiple Select show a search field to search through checkbox items. By default this option is set to ```false```. #### width Type: integer/string Define the width property of the dropdown list, support a percentage setting. By default this option is set to ```undefined```. Which is the same as the select input field. #### maxHeight Type: integer Define the maximum height property of the dropdown list. By default this option is set to ```250```. #### keepOpen Type: boolean Keep the select dropdown always open. By default this option is set to ```false```. #### styler Type: function The item styler function, return style string to custom the item style such as ```background: red```. The function take one parameter: value. ```javascript styler: function(value) { if (value == '1') { return 'background-color: #ffee00; color: red;'; } } ``` ### Events #### onOpen Fires when the dropdown list is open. #### onClose Fires when the dropdown list is close. #### onCheckAll Fires when all the options are checked by either clicking the "Select all" checkbox, or when the "checkall" method is programatically called. #### onUncheckAll #### onFocus Bind an event handler to the "focus". #### onBlur Bind an event handler to the "blur" #### onOptgroupClick Fires when a an optgroup label is clicked on. ```javascript onOptgroupClick: function(view) { /* view.label: the text of the optgroup view.checked: the checked of the optgroup view.children: an array of the checkboxes (DOM elements) inside the optgroup */ } ``` #### onClick Fires when a checkbox is checked or unchecked. ```javascript onClick: function(view) { /* view.label: the text of the checkbox item view.checked: the checked of the checkbox item */ } ``` ### Methods #### getSelects Gets the selected values. Parameter: type Type: string The type of selected items. value or text The default is ```value```. ``` javascript alert('Selected values: ' + $('select').multipleSelect('getSelects')); alert('Selected texts: ' + $('select').multipleSelect('getSelects', 'text')); ``` #### setSelects Sets the selected values. Parameter: values Type: array The values of selected items. ``` javascript $('select').multipleSelect('setSelects', [1, 3]); ``` #### enable Enables Select. ``` javascript $('select').multipleSelect('enable'); ``` #### disable Disables Select. During this mode the user is not allowed to manipulate the selection. ``` javascript $('select').multipleSelect('disable'); ``` #### checkAll Check all checkboxes. ``` javascript $('select').multipleSelect('checkAll'); ``` #### uncheckAll Uncheck all checkboxes. ``` javascript $('select').multipleSelect('uncheckAll'); ``` #### focus Focus the multiple select. ``` javascript $('select').multipleSelect('focus'); ``` #### blur Blur the multiple select. ``` javascript $('select').multipleSelect('blur'); ``` #### refresh Reloads the Multiple Select. If you're dynamically adding/removing option tags on the original select via AJAX or DOM manipulation methods, call refresh to reflect the changes. ``` javascript $('select').multipleSelect('refresh'); ``` ## About [blog](http://wenzhixin.net.cn) [scutech](http://www.scutech.com) ## Acknowledgements © 2012-2014, Multiple Selected is licensed under the The MIT License. Coded by wenzhixin. My website ([wenzhixin.net.cn](http://wenzhixin.net.cn)) Github ([@wenzhixin](https://github.com/wenzhixin)) Weibo ([@_文翼_](http://weibo.com/2292826740)) Email (wenzhixin2010@gmail.com)