Fast Multi Select Picker For Bootstrap 4

Fast Multi Select Picker For Bootstrap 4
File Size: 15.7 KB
Views Total: 1362
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,
});

Changelog:

2022-06-22

  • Lower select all threshold to 10; fix to handle when all is checked followed by an uncheck

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