Quick Multi Choose Picker For Bootstrap 4

A blazing-fast, user-friendly, multifunctional, jQuery-based a number of choose plugin for Bootstrap 4 framework.

Highlighted Options:

• Collapsible & expandable choice teams.
• Choose choices with checkboxes.
• Test All performance that means that you can choose all choices with a single checkbox.
• Search filter performance.
• Works with native choose ingredient.

The best way to use it:

1. Load the wanted jQuery library, Bootstrap framework, and Font Superior iconic font within the doc.

<!-- jQuery + Bootstrap -->
<hyperlink 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 Superior 5 -->
<hyperlink 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. Simply name the perform multiselect() on the prevailing choose ingredient and the plugin will maintain the remaining.

<choose id="coloration" class="multiselect" identify="coloration[]" a number of="a number of">
  <choice worth="1">Crimson</choice>
  <choice worth="2">Orange</choice>
  <choice worth="3">Yellow</choice>
  <choice worth="4">Inexperienced</choice>
  <choice worth="5">Blue</choice>
  <choice worth="6">Indigo</choice>
  <choice worth="7">Violet</choice>
  <optgroup label="Reds">
    <choice worth="8">Mild Crimson</choice>
    <choice worth="9">Darkish Crimson</choice>
  </optgroup>
</choose>

jQuery('#coloration').multiselect();

4. Decide whether or not to show a search subject within the a number of choose. Default: false.

jQuery('#coloration').multiselect({
  enableFiltering: true,
  enableCaseSensitiveFiltering: true,
});

5. Allow the Test All performance. By default, the plugin mechanically provides a Test All checkbox to the choose when the choices are greater than 50.

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

6. Decide whether or not to break down choices in choice teams. Default: true.

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

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

jQuery('#coloration').multiselect({
  minScreenWidth: 576,
});

8. Set & get choices.

// Get choice
let getOption = jQuery('#coloration').multiselect('optionName');

// Set choice
jQuery('#coloration').multiselect('optionName', Worth);

Changelog:

2024-09-08

• Bug fixes associated to updating view based mostly on modifications to underlying choose

2024-07-28

• Update to keep away from detaching drop down menu in modals

2024-06-01

• Replace to raised deal with indifferent orphaned drop down menus that may happen if selects will get faraway from DOM

2024-04-05

• Velocity up replace when there many choices

2024-03-23

• Append dropdown menu to physique when dropdown is proven in case it’s in a container

2024-02-27

• Minor tweak for selectAllDeselectAll when all is chosen

2024-02-25

2024-01-06

• Repair bug associated to refreshing choose throughout back_forward navigation

2023-12-30

• Expose defaults in order that they are often globally overridden

2023-09-21

• Replace to assist common choose together with varied enhancements

2023-08-12

2023-05-29

• Replace to assist clickable optgroups; 
• change to choices being false by default in order that options will be enabled as wanted

2022-06-22

• Decrease choose all threshold to 10; repair to deal with when all is checked adopted by an uncheck

This superior jQuery plugin is developed by lesilent. For extra Superior Usages, please test the demo web page or go to the official web site.