Fast Multi Select Picker For Bootstrap 4

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

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>

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

  enableFiltering: true,
  enableCaseSensitiveFiltering: 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.

  includeSelectAllOption: true,
  includeSelectAllOptionMin: 50,
  selectAllDeselectAll: false,
  selectAllText: 'All',
  selectAllValue: ''

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

  enableCollapsibleOptGroups: true,
  collapseOptGroupsByDefault: true,

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

  minScreenWidth: 576,

8. Set & get options.

// Get option
let getOption = jQuery('#color').multiselect('optionName');

// Set option
jQuery('#color').multiselect('optionName', Value);



  • Update to better handle detached orphaned drop down menus that can occur if selects gets removed from DOM


  • Fix search regression bug
  • Fix case sensitive search


  • Speed up update when there many options


  • Append dropdown menu to body when dropdown is shown in case it is in a container


  • Minor tweak for selectAllDeselectAll when all is selected


  • Bugfixes


  • Fix bug related to refreshing select during back_forward navigation


  • Expose defaults so that they can be globally overridden


  • Update to support regular select along with various improvements


  • Bugfixes


  • Update to support clickable optgroups; 
  • switch to options being false by default so that features can be enabled as needed


  • 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.