A Multi Select Picker for Bootstrap 4 | Mutiselect-bs4

Mutiselect-bs4 is a very fast, easy-to-use, the multifunctional, jQuery-based plugin for the Bootstrap 4 framework.

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 performance multiselect() on the prevailing chosen 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 number of choices.

jQuery('#color').multiselect({
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
});

Read More – Vuejs Material Date Range Picker | v-md-daterangepicker

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,
});

Read More – Simple Multi-select Component With Items Displayed In A Table | vue-gridmultiselect

Options

OptionDefaultDescription
collapseOptGroupsByDefaulttrueWhen an optgroup exists in a select, collapse them.
enableCaseInsensitiveFilteringtrueEnable case-insensitive filtering when filtering is enabled.
enableCollapsibleOptGroupstrueMake optgroups collapsible.
enableFilteringfalseEnable a filter to select options.
includeSelectAllOptionfalseInclude an option to “Select All”. This is typically disabled because the includeSelectAllOptionMin is normally used.
includeSelectAllOptionMin50A minimum number of options that trigger the “Select All” option to be enabled.
minScreenWidth576Minimum screen width where multi-select is enabled.
selectAllDeselectAllfalseDe-select all options if the “Select All” option is selected.
selectAllText'All'The text for the “Select 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.

Share