
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.
- Publication date: 25.02.2018
- Source