Mutiselect-bs4 is a very fast, easy-to-use, multifunctional, jQuery-based plugin for the Bootstrap 4 framework.
bootstrap 4 multiselect dropdown, bootstrap selectpicker, multiselect dropdown with checkbox, bootstrap 4 select dropdown, jquery multiselect
Highlighted Features:
- Collapsible and expandable option sets.
- Select options with checkboxes.
- Select all functions that allow you to select all options with a single checkbox.
- Search filter function.
- Works with the original selection element.
Angular Material Date Picker With Range Selection | saturn-datepicker
How to make use of it:
1. Load the wanted jQuery library, Bootstrap framework, and Font Awesome iconic font within the doc.
<!-- jQuery + Bootstrap --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script> <!-- Font Awesome 5 --> <link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
2. Load the multiselect-bs4 plugin’s script after jQuery.
<script src="js/multiselect-bs4.js"></script>
3. Just name the perform multiselect()
on the prevailing choose aspect and the plugin will handle the remaining.
<select id="color" class="multiselect" name="color[]" multiple="multiple"> <option value="1">Red</option> <option value="2">Orange</option> <option value="3">Yellow</option> <option value="4">Green</option> <option value="5">Blue</option> <option value="6">Indigo</option> <option value="7">Violet</option> <optgroup label="Reds"> <option value="8">Light Red</option> <option value="9">Dark Red</option> </optgroup> </select>
4. Determine whether or not to show a search area within the a number of choose.
jQuery('#color').multiselect({ enableFiltering: true, enableCaseInsensitiveFiltering: true, });
5. Enable the Check All functionality.
jQuery('#color').multiselect({ includeSelectAllOptionMin: 50, selectAllDeselectAll: false, selectAllText: 'All', selectAllValue: '' });
6. Determine whether or not to collapse choices in possibility groups.
jQuery('#color').multiselect({ enableCollapsibleOptGroups: true, collapseOptGroupsByDefault: true, });
7. Auto-disable the plugin when the display screen width is smaller than this breakpoint.
jQuery('#color').multiselect({ minScreenWidth: 480, });
Options
Option | Default | Description |
---|---|---|
collapseOptGroupsByDefault | true | When an optgroup exists in a select, collapse them. |
enableCaseInsensitiveFiltering | true | Enable case insensitive filtering when filtering is enabled. |
enableCollapsibleOptGroups | true | Make optgroups collapsible. |
enableFiltering | false | Enable a filter to select options. |
includeSelectAllOption | false | Include an option to “Select All”. This is typically disabled because the includeSelectAllOptionMin is normally used. |
includeSelectAllOptionMin | 50 | A minimum number of options that trigger the “Select All” option to be enabled. |
minScreenWidth | 576 | Minimum screen width where multi-select is enabled. |
selectAllDeselectAll | false | De-select all options if the “Select All” option is selected. |
selectAllText | 'All' | The text for “Sselect All” option. |
selectAllValue | '' | The value for the “Select All” option. |
Fast Multi Select Picker For Bootstrap 4, Mutiselect-bs4 Plugin/Github
See Demo And Download
Official Website(lesilent): Click Here
This superior jQuery/javascript plugin is developed by lesilent. For extra advanced usage, please go to the official website.
Be First to Comment