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.

Features:

• 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/jquery.bs-select.min.js"></script>

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

<select>
  ...
</select>

$(function(){ 
  $('select').bsSelect();
});

3. Append small descriptions to options.

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

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

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

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

$.bsSelect.setDefaults({

  // 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
$('select').bsSelect('show');
$('select').bsSelect('hide');

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

// select all options
$('select').bsSelect('selectAll');

// deselect all options
$('select').bsSelect('selectNone');

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

// refresh the dropdown
$('select').bsSelect('refresh');

// destroy the dropdown
$('select').bsSelect('destroy');

7. Events.

• hide.bs.select
• hidden.bs.select
• show.bs.select 
• shown.bs.select
• refresh.bs.select
• change.bs.select
• update.bs.select
• destroy.bs.select
• selectAll.bs.select
• selectNone.bs.select
• any.bs.select

Changelog:

2023-06-17

• JS update

2023-06-13

• JS update

2023-06-12

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