Easy-to-Use Multi-Selection Plugin for Bootstrap 5/4 | BsMultiSelect

BsMultiSelect follows Bootstrap 4 conventions and uses the same tools (babel, sass, and rollup) so pretends to represent the modern plugin for the BS team. Supports all features of Bootstrap component: pre/append buttons, custom validation, and form validation.

BsMultiSelect handles click events friendly to your modals and popups. Important: for mouse events preventDefaultstopPropagation were not used (so your other controls always will get ‘clicks’ on them).

BsMultiSelect removes its DOM elements (in ‘option was deselected initiated by the click on “x” button scenario) using setTimeout(..,0) – this simplifies the identification of the click event’s target during the bubbling (because the element is not removing in click event loop iteration you always are able to identify that click’s target belongs to BsMultiselect – and skip processing – most probably cancel popup close handler);

Must Read: A jQuery Plugin To Multi-Selection Function | DualSelectList

Multi-Selection Plugin for Bootstrap 5 Details

Post NameBsmultiselect Plugin
Author NameDashboardCode
CategoryBootstrap, Codepen, Form Plugins
Official PageClick Here
Official Websitegithub.com
Publish DateMay 27, 2021
Last UpdateJuly 7, 2023
DownloadLink Below

For keyboard events preventDefault was used to a) handle tab (9) as autocomplete b) arrows (3840) to prevent the browser from still them; c) enter (13) to prevent default button action (submit etc.) d) ESC (27) to avoid “clear text on esc“functionality duplication.

Manipulations with SELECT > OPTION

When the data source is select the element then when the user makes a selection the options selected the attribute is not removed or added, only HTMLOptionElement.selected value is setup (this automatically doesn’t add\remove selected attribute). If it is not enough and you need to add/remove an attribute, then you can override setSelected in the configuration (note: but this breaks HTML Form reset functionality in Chrome).

Dynamic Updates

Inspite plugin subscribes to forms reset event listener, there are no MutationObserver defined inside (BsMultiSelect does not track properties on original SELECT, or js object data, on parent FIELDSET element, or presence of .was-validated on the parent, or the presence of is-validis-invalid original select or substitutional configuration methods.

If you change original select‘s appearance after BsMultiSelecte was created then you will need to push changes to components with corresponding methods UpdateIsValidUpdateDisabledUpdateSizeUpdateWasValidatedUpdateValidy. Or All together with UpdateAppearance.

If you change options/items properties (text, selecteddisabledhidden) or if you delete them or insert new items you need to push changes to components with UpdateData. There is specific UpdateOptionsSelected method synchronizes only selected states of options, UpdateOptionsDisabled to synchronize only disabled states of options, UpdateOptionsHidden for hidden.

Update the method works like “update all”: it calls UpdateAppearance and UpdateData.


  • RTL support
  • Allows execution as an ES module (does not require jQuery)
  • Model validation
  • Direct filter
  • Licensed under APACHE 2

Must Read: A Multi-selection Dropdown Plugin In Vanilla Javascript | sellect.js


How to make use of it:

1. Add a jQuery library and Bootstrap 5 (or Bootstrap 4) framework installed.

<!-- Stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">

<!-- jQuery & Bootstrap -->
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Load the jQuery BsMultiSelect plugin’s script after jQuery.

<!-- For Bootstrap 5 -->
<script src="dist/js/BsMultiSelect.min.js"></script>

<!-- For Bootstrap 4 -->
<script src="dist/js/BsMultiSelect.bs4.min.js"></script>

3. the function dashboardCodeBsMultiSelect on the multi-select checklist and the plugin.

<select name="states" id="example" class="form-control"  multiple="multiple" style="display: none;">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option selected value="CA">California</option>



4. All default options to customize the plugin.

  useCssPatch: true,
  containerClass: "dashboardcode-bsmultiselect",
  css: css,
  cssPatch: cssPatch,
  placeholder: '',
  staticContentGenerator: null,
  getLabelElement: null,
  pickContentGenerator: null,
  choiceContentGenerator: null,
  buildConfiguration: null,
  isRtl: null,
  setSelected: null,
  required: null,
  optionsAdapter: null,
  options: null,
  getDisabled: null,
  getSize: null,
  getValidity: null,
  labelElement: null,
  valueMissingMessage: '',
  getIsValueMissing: null

5. the default styles & Bootstrap 4 classes to customize the plugin.

  cssPatch: {
    choices: {
      listStyleType: 'none'
    picks: {
      listStyleType: 'none',
      display: 'flex',
      flexWrap: 'wrap',
      height: 'auto',
      marginBottom: '0'
    choice: 'px-md-2 px-1',
    choice_hover: 'text-primary bg-light',
    filterInput: {
      border: '0px',
      height: 'auto',
      boxShadow: 'none',
      padding: '0',
      margin: '0',
      outline: 'none',
      backgroundColor: 'transparent',
      backgroundImage: 'none' // otherwise BS .was-validated set its image

    filterInput_empty: 'form-control',
    // need for placeholder, TODO test form-control-plaintext
    // used in staticContentGenerator
    picks_disabled: {
      backgroundColor: '#e9ecef'
    picks_focus: {
      borderColor: '#80bdff',
      boxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)'
    picks_focus_valid: {
      borderColor: '',
      boxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)'
    picks_focus_invalid: {
      borderColor: '',
      boxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)'
    // used in BsAppearance
    picks_def: {
      minHeight: 'calc(2.25rem + 2px)'
    picks_lg: {
      minHeight: 'calc(2.875rem + 2px)'
    picks_sm: {
      minHeight: 'calc(1.8125rem + 2px)'
    // used in pickContentGenerator
    pick: {
      paddingLeft: '0px',
      lineHeight: '1.5em'
    pickButton: {
      fontSize: '1.5em',
      lineHeight: '.9em',
      float: "none"
    pickContent_disabled: {
      opacity: '.65'
    // used in choiceContentGenerator
    choiceContent: {
      justifyContent: 'initial'
    // BS problem: without this on inline form menu items justified center
    choiceLabel: {
      color: 'inherit'
    // otherwise BS .was-validated set its color
    choiceCheckBox: {
      color: 'inherit'
    choiceLabel_disabled: {
      opacity: '.65'

See Demo And Download


Official Website(DashboardCode): Click Here

This superior jQuery/javascript plugin is developed by DashboardCode. For extra Advanced usage, please go to the official website.

Related Posts


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Leave a Reply

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