Press "Enter" to skip to content

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

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 with.
includeSelectAllOptionfalseInclude an option to “Select All”. This is typically disabled because the includeSelectAllOptionMin is normally used.
includeSelectAllOptionMin50Minimum number of options that trigger the “Select All” option be enabled.
minScreenWidth576Minimum screen width where multiselect is enabled.
selectAllDeselectAllfalseDe-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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *