Create Enhanced Bootstrap 5 Select Input With bs-select.js

File Size: 19.3 KB
Views Total: 1715
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Enhanced Bootstrap 5 Select Input With bs-select.js

bs-select.js is the upgraded version of the jQuery bsSelectDrop plugin, which converts a basic select element into an enhanced and customizable Bootstrap 5 dropdown component.


  • Supports single select, multiple select, and option groups.
  • Real-time search that makes option selection quick and effortless.
  • Allows you to add custom icons to options using 3rd-party icon libraries like Font Awesome and Bootstrap Icons.
  • Comes with numerous options for customizing the appearance and behavior of the dropdown element.
  • A variety of methods and events for interacting with the dropdown select.

How to use it:

1. To get started, load the jQuery bs-select.js plugin and other required resources in the document.

<!-- jQuery  -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Icons  -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.css" />

<!-- jQuery bs-select.js -->
<script src="/path/to/dist/"></script>

2. Call the function bsSelect on your select element and the plugin will do the rest.


3. Append small descriptions to options.

  <option data-subtext="jQuery Script" value="1">jQuery</option>

4. Add custom icons (CSS classes) to options.

  <option data-icon="fa-brands fa-square-js" value="1">jQuery</option>

5. All plugin options to customize the dropdown select. Note that each option can be passed via HTML data attributes as follows.


  // data-btn-width
  btnWidth: 'fit-content',

  // data-btn-empty-text
  btnEmptyText: 'Please select..',

  // data-btn-split
  btnSplit: false,

  // data-drop-direction
  // dropup|dropend|dropstart|dropdown-center|dropup-center
  dropDirection: null,

  // data-menu-header-class
  menuHeaderClass: 'text-bg-secondary text-uppercase',

  // data-menu-item-class
  menuItemClass: null,

  // data-btn-class
  btnClass: 'btn-outline-dark',

  // data-btn-split
  btnSplit: false,

  // data-search
  search: true,

  // data-search-text
  searchText: "Search..",

  // data-menu-pre-html
  menuPreHtml: null,

  // data-menu-append-html
  menuAppendHtml: null,

  // data-menu-max-height
  menuMaxHeight: 300,

  // data-show-subtext
  showSubtext: true,

  // data-show-action-menu
  showActionMenu: true,

  // data-action-menu-btn-class
  actionMenuBtnClass: 'btn-light',

  // data-show-selection-as-list
  showSelectionAsList: false,

  // show the selected text
  showSelectedText: function (count, total) {
    return count + ' of ' + total +' selected';

  // data-deselect-all-text
  deselectAllText: 'Deselect All',

  // data-select-all-text
  selectAllText: 'Select All',

  // data-checked-icon
  checkedIcon: "bi bi-check-lg",
  debug: false,
  debugElement: null,

  // callback functions
  onBeforeChange: ($select) => { return true; }
  onKeyDown: ($select, keyEvent) => { // }

6. API methods.

// show/hide the dropdown

// get the value
$('select').bsSelect('val', 1);

// select all options

// deselect all options

// update options
$('select').bsSelect('updateOptions', {
  // options here

// refresh the dropdown

// destroy the dropdown

7. Events.




  • Add 'onKeyDown' function and related event


  • Update click event handling for labels in


  • Update attribute check in


  • 'Enter' keyup event has been introduced to make user interaction easier and quicker during dropdown searches. This event handler selects the first visible option from the search results. Dropdown items also now utilize an anchor tag, thereby improving both creation and selection processes.


  • Update condition for 'isDisabled' in


  • Refactor code for Bootstrap dropdown functionality


  • JS update


  • JS update


  • Add split option

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