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

File Size: 16.9 KB
Views Total: 212
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,

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.




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