jQuery Plugin For Selecting Multiple Elements - Multiple Select

jQuery Plugin For Selecting Multiple Elements - Multiple Select
File Size: 265 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.