jQuery Plugin For Selecting Multiple Elements - Multiple Select

Multiple Select is an useful jQuery plugin that allow to select multiple elements in a select drop down list.

Related plugins:

How to use it:

1. Include jQuery library and jQuery Multiple Select on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.multiple.select.js"></script>

2. Include jQuery Multiple Select CSS to style the select box

<link href="multiple-select.css" rel="stylesheet" type="text/css">

3. Create a stardard html select box

<select id="demo">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
...
</select>

4. Call the plugin with options and callback functions.

<script>
$(function() { 
$("#demo").multipleSelect({
name: '',
isOpen: false,
placeholder: '',
selectAll: true,
selectAllDelimiter: ['[', ']'],
minimumCountSelected: 3,
ellipsis: false,
multiple: false,
multipleWidth: 80,
single: false,
filter: false,
width: undefined,
dropWidth: undefined,
maxHeight: 250,
container: null,
position: 'bottom',
keepOpen: false,
animate: 'none', // 'none', 'fade', 'slide'
displayValues: false,
delimiter: ', ',
addTitle: false,
filterAcceptOnEnter: false,
hideOptgroupCheckboxes: false,
selectAllText: 'Select all',
allSelected: 'All selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
styler: function () {
  return false;
},
textTemplate: function ($elm) {
  return $elm.html();
},
labelTemplate: function ($elm) {
  return $elm.attr('label');
},
onOpen: function () {
  return false;
},
onClose: function () {
  return false;
},
onCheckAll: function () {
  return false;
},
onUncheckAll: function () {
  return false;
},
onFocus: function () {
  return false;
},
onBlur: function () {
  return false;
},
onOptgroupClick: function () {
  return false;
},
onClick: function () {
  return false;
},
onFilter: function () {
  return false;
}
});
});
</script>

5. 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.
• onClick: Fires when a checkbox is checked or unchecked.

6. API methods.

// Gets the selected values.
alert('Selected values: ' + $('select').multipleSelect('getSelects'));
alert('Selected texts: ' + $('select').multipleSelect('getSelects', 'text'));
// Sets the selected values.
$('select').multipleSelect('setSelects', [1, 3]);
// Enables Select.
$('select').multipleSelect('enable');
// Disables Select. During this mode the user is not allowed to manipulate the selection.
$('select').multipleSelect('disable');
// Check all checkboxes.
$('select').multipleSelect('checkAll');
// Uncheck all checkboxes.
$('select').multipleSelect('uncheckAll');
// Focus the multiple select.
$('select').multipleSelect('focus');
// Blur the multiple select.
$('select').multipleSelect('blur');
// Reloads the Multiple Select.
$('select').multipleSelect('refresh');

Change logs:

2018-02-25

• Update multiple-select.js

v1.2.1 (2016-01-03)

• Fix: single select with Optgroups bug.
• Fix: special character problem.
• Fix: Added onFilter event.
• Fix: added animate option to support fade and slide animates.
• Fix: element detection.
• Fix jQuery dependency.
• Fixed disable issue.
• Add selected class to 'select all' option.
• Added logic to perform accent insensitive compare when filtering values.
• Added dropWidth option.
• Added open and close methods.

v1.2.0 (2015-11-24)

• [enh] Update jquery.multiple.select.js to multiple-select.js.
• [enh] Trigger change for select after set of new value.
• [bug] Prevents updateSelectAll() from calling options.onCheckAll() on init.
• [enh] Added labelTemplate option.
• [bug] Fix Automatically set Group when all child was selected.
• [bug] Fixed filter functionality with 'no-results' label behavior.
• [bug] Fix #184: prevented the dropdown handle error.
• [enh] INPUT tags should be nameless.
• [bug] Fix auto hide when the single option is set to true.
• [bug] Fix show selectAll and hide noResults when open.
• [bug] Fix update width option to support a percentage setting.
• [bug] Trigger the checkbox on the entire line.
• [bug] Added noMatchesFound option.
• [bug] Update seperator to separator.
• [enh] Allow object of options along with initial method.
• [enh] Add a filterAcceptOnEnter option.
• [enh] Put class on ms-parent div instead of ul.
• [bug] Fixed connect select back to its label.
• [enh] Added hideOptgroupCheckboxes option to hide optgroup checkboxes.
• [enh] Added displayValues and delimiter options.
• [enh] Added textTemplate option to custom the text.
• [enh] Added selectAllDelimiter option.
• [enh] Added ellipsis option.
• [enh] Get percentage width, if used.
• [bug] Fix spelling error.
• [bug] Fixed the error when element id's contain colons.
• [bug] Fix current selected element not displayed in newer jquery versions.
• [bug] Fix plain text stored to HTML.
• [bug] Update multiple-select.png.
• [enh] Added 'close' to allowedMethods.
• [bug] Prevent dropdown from closing occasionally when clicking on checkbox.
• [bug] Fixed dropdown not closing when focus was lost.
• [enh] Support for add title (tooltip) on the select list.

2014-09-23

• correct typo

2014-05-05

• update width option to support a percentage setting, and add responsive layout.

2014-04-29

• Fixed: show selectAll and hide noResults when open.

2014-04-26

• Fixed: auto hide when the single option is set to true.

2014-04-25

• Add keepOpen option.
• Fix isOpen and filter options are both true bug.
• Fire onCheckAll event when literally select.
• Add data attributes for support.
• Add name option.

2014-04-19

• Fixed: fire onCheckAll when literally select each element till all are selected.
• Fixed: call open function after init when isOpen and filter options are set to true.

v1.0.9 (2014-04-15)

• add onFocus and onBlur events.
• Fix countSelected display error when select has disabled options.

v1.0.8 (2014-03-12)

• add 'No matches found' message when there are no results found.

v1.0.7 (2014-03-06)

• add position option.

v1.0.6 (2014-03-06)

• fixed the filters not working bugs.

v1.0.6 (2014-03-05)

• add an to allow only single select.

v1.0.5 (2013-11-27)

• update the optgroups select text.
• fixed image is not shown in Firefox 25.0.1

This awesome jQuery plugin is developed by wenzhixin. For more Advanced Usages, please check the demo page or visit the official website.