Fast Multi Select Picker For Bootstrap 4

Fast Multi Select Picker For Bootstrap 4
File Size: 14.9 KB
Views Total: 254
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A blazing-fast, user-friendly, multifunctional, jQuery-based multiple select plugin for Bootstrap 4 framework.

Highlighted Features:

  • Collapsible & expandable option groups.
  • Select options with checkboxes.
  • Check All functionality that allows you to select all options with a single checkbox.
  • Search filter functionality.
  • Works with native select element.

How to use it:

1. Load the needed jQuery library, Bootstrap framework, and Font Awesome iconic font in the document.

<!-- 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 call the function multiselect() on the existing select element and the plugin will take care of the rest.

<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>
jQuery('#color').multiselect();

4. Determine whether to display a search field in the multiple select. Default: false.

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

5. Enable the Check All functionality. By default, the plugin automatically adds a Check All checkbox to the select when the options are more than 50.

jQuery('#color').multiselect({
  includeSelectAllOptionMin: 50,
  selectAllDeselectAll: false,
  selectAllText: 'All',
  selectAllValue: ''
});

6. Determine whether to collapse options in option groups. Default: true.

jQuery('#color').multiselect({
  enableCollapsibleOptGroups: true,
  collapseOptGroupsByDefault: true,
});

7. Auto-disable the plugin when the screen width is smaller than this breakpoint. Default: 576.

jQuery('#color').multiselect({
  minScreenWidth: 480,
});

This awesome jQuery plugin is developed by lesilent. For more Advanced Usages, please check the demo page or visit the official website.