This time I will share jQuery Plugin and tutorial about jQuery Multiple Select Plugin For Bootstrap – Bootstrap Multiselect, hope it will help you in programming stack.
| File Size: | 1.63 MB |
|---|---|
| Views Total: | 496592 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Bootstrap Multiselect is a jQuery plugin for Bootstrap 4 & 3 that allows the visitor to select multiple options from a dropdown select list containing the single options as checkboxes.
Licensed under the Apache License, Version 2.0 & BSD 3-Clause. The Bootstrap 3 Version is available here.
More Features:
- Allows HTML content in options.
- Right or Top dropdown.
- Select All option to select all options with a single click.
- collapsible OptGroups.
- Allows to filter options.
- Custom templates.
- Keyboard accessible.
- Server-Side Processing.
- And much more.
Alternative plugins:
- jQuery Multiple Select Box Plugin
- jQuery Multiple Select Element Replacement Plugin – selectlist
- jQuery Plugin For Selecting Multiple Elements – Multiple Select
View more Multi Select plugins at:
Basic Usage:
1. Include jQuery javascript library and Twitter’s Bootstrap framework on your page.
1 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/cdn/bootstrap.min.js"></script> |
2. Include jQuery bootstrap multiselect plugin on the page, after jQuery library.
1 |
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"> |
2 |
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> |
3. Create a standard select list.
1 |
<select id="demo" multiple="multiple"> |
2 |
<option value="Javascript">Javascript</option> |
3 |
<option value="Python">Python</option> |
4 |
<option value="LISP">LISP</option> |
5 |
<option value="C++">C++</option> |
6 |
<option value="jQuery">jQuery</option> |
7 |
<option value="Ruby">Ruby</option> |
8 |
</select> |
4. Call the function on the select element to initialize the plugin.
1 |
$(function(){ |
2 |
$('#demo').multiselect(); |
3 |
}); |
5. All default plugin options to customize the multiselect.
001 |
$('#demo').multiselect({ |
002 |
003 |
// allows HTML content |
004 |
enableHTML: false, |
005 |
006 |
// CSS class of the multiselect button |
007 |
buttonClass: 'custom-select', |
008 |
009 |
// inherits the class of the button from the original select |
010 |
inheritClass: false, |
011 |
012 |
// width of the multiselect button |
013 |
buttonWidth: 'auto', |
014 |
015 |
// container that holds both the button as well as the dropdown |
016 |
buttonContainer: '<div class="btn-group" />', |
017 |
018 |
// places the dropdown on the right side |
019 |
dropRight: false, |
020 |
021 |
// places the dropdown on the top |
022 |
dropUp: false, |
023 |
024 |
// CSS class of the selected option |
025 |
selectedClass: 'active', |
026 |
027 |
// maximum height of the dropdown menu |
028 |
// if maximum height is exceeded a scrollbar will be displayed |
029 |
maxHeight: false, |
030 |
031 |
// includes Select All Option |
032 |
includeSelectAllOption: false, |
033 |
034 |
// shows the Select All Option if options are more than ... |
035 |
includeSelectAllIfMoreThan: 0, |
036 |
037 |
// Lable of Select All |
038 |
selectAllText: ' Select all', |
039 |
040 |
// the select all option is added as additional option within the select |
041 |
// o distinguish this option from the original options the value used for the select all option can be configured using the selectAllValue option. |
042 |
selectAllValue: 'multiselect-all', |
043 |
044 |
// control the name given to the select all option |
045 |
selectAllName: false, |
046 |
047 |
// if true, the number of selected options will be shown in parantheses when all options are seleted. |
048 |
selectAllNumber: true, |
049 |
050 |
// setting both includeSelectAllOption and enableFiltering to true, the select all option does always select only the visible option |
051 |
// with setting selectAllJustVisible to false this behavior is changed such that always all options (irrespective of whether they are visible) are selected |
052 |
selectAllJustVisible: true, |
053 |
054 |
// enables filtering |
055 |
enableFiltering: false, |
056 |
057 |
// determines if is case sensitive when filtering |
058 |
enableCaseInsensitiveFiltering: false, |
059 |
060 |
// enables full value filtering |
061 |
enableFullValueFiltering: false, |
062 |
063 |
// if true, optgroup's will be clickable, allowing to easily select multiple options belonging to the same group |
064 |
enableClickableOptGroups: false, |
065 |
066 |
// enables collapsible OptGroups |
067 |
enableCollapsibleOptGroups: false, |
068 |
069 |
// collapses all OptGroups on init |
070 |
collapseOptGroupsByDefault: false, |
071 |
072 |
// placeholder of filter filed |
073 |
filterPlaceholder: 'Search', |
074 |
075 |
// possible options: 'text', 'value', 'both' |
076 |
filterBehavior: 'text', |
077 |
078 |
// includes clear button inside the filter filed |
079 |
includeFilterClearBtn: true, |
080 |
081 |
// prevents input change event |
082 |
preventInputChangeEvent: false, |
083 |
