A Multi Select Picker for Bootstrap 4 | Mutiselect-bs4

Mutiselect-bs4 is a very fast, easy-to-use, a 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.

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. By default, the plugin routinely provides a Check All checkbox to the choose when the choices are greater than 50.

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 with.
`includeSelectAllOption`	`false`	Include an option to “Select All”. This is typically disabled because the `includeSelectAllOptionMin` is normally used.
`includeSelectAllOptionMin`	`50`	Minimum number of options that trigger the “Select All” option be enabled.
`minScreenWidth`	`576`	Minimum screen width where multiselect 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.