jQuery Plugin For Filterable Bootstrap Dropdown Select - Bootstrap Select

jQuery Plugin For Filterable Bootstrap Dropdown Select - Bootstrap Select
File Size: 340 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Bootstrap Select is a jQuery plugin to enhance the default Bootstrap dropdown select with multiple options like: optgoup support, auto-completion, clear selection and live filtering.


  • jQuery.
  • Bootstrap 4 or Bootstrap 3 framework.
  • Font Awesome icons (For Bootstrap 4).


# Yarn
$ yarn add bootstrap-select

$ npm install bootstrap-select --save

How to use it:

1. Include the jQuery Bootstrap Select plugin and other required resources into your Bootstrap page.

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<!-- Bootstrap Select Stylesheet -->
<link href="/path/to/bootstrap-select.min.css" rel="stylesheet">

<!-- Bootstrap 4 JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!-- Bootstrap Select Main JavaScript -->
<script src="/path/to/bootstrap-select.min.js"></script>

<!-- Bootstrap Select Language JavaScript -->
<script src="/path/to/i18n/defaults-LANGUAGE.min.js"></script>

2. Just add the class 'selectpicker' to your select element and done.

<select class="selectpicker">

3. You can also initialize the plugin by call the function on the 'select' element.


4. All default plugin settings.


  // text for none selected
  noneSelectedText: 'Nothing selected',

  // text for no results
  noneResultsText: 'No results matched {0}',
  countSelectedText: function (numSelected, numTotal) {
    return (numSelected == 1) ? "{0} item selected" : "{0} items selected";

  // text for max options
  maxOptionsText: function (numAll, numGroup) {
    return [
      (numAll == 1) ? 'Limit reached ({n} item max)' : 'Limit reached ({n} items max)',
      (numGroup == 1) ? 'Group limit reached ({n} item max)' : 'Group limit reached ({n} items max)'

  // text for select all
  selectAllText: 'Select All',

  // text for deselect all
  deselectAllText: 'Deselect All',

  // enables done button
  doneButton: false,

  // text for done button
  doneButtonText: 'Close',

  // custom separator
  multipleSeparator: ', ',

  // basic class
  styleBase: 'btn',

  // button classes
  style: classNames.BUTTONCLASS,

  // 'auto' | integer | false
  size: 'auto',

  // title for dropdown select
  title: null,

  // values' | 'static' | 'count' | 'count > x'
  selectedTextFormat: 'values',

  // width
  width: false,

  // string | false
  container: false,

  // hides disabled options
  hideDisabled: false,

  // shows sub text
  showSubtext: false,

  // shows icons
  showIcon: true,

  // shows content
  showContent: true,

  // auto reposition to fit screen
  dropupAuto: true,

  // adds a header to the dropdown select
  header: false,

  // live filter options
  liveSearch: false,
  liveSearchPlaceholder: null,
  liveSearchNormalize: false,
  liveSearchStyle: 'contains',

  // shows Select All & Deselect All
  actionsBox: false,

  // icon base
  iconBase: 'glyphicon',

  // tick icon
  tickIcon: 'glyphicon-ok',

  // shows tick
  showTick: false,

  // custom template
  template: {
    caret: '<span class="caret"></span>'

  // integer | false
  maxOptions: false,

  // enables the device's native select for the dropdown select
  mobile: false,

  // if true, treats the tab character like the enter or space characters within the selectpicker dropdown.
  selectOnTab: false,

  // boolean | 'auto'
  dropdownAlignRight: false,

  // padding
  windowPadding: 0,

  // If enabled, the items in the dropdown will be rendered using virtualization (i.e. only the items that are within the viewport will be rendered). 
  // This drastically improves performance for selects with a large number of options. 
  // Set to an integer to only use virtualization if the select has at least that number of options.
  virtualScroll: 600

5. API methods.

// Sets the selected value
$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

// Selects all items

// Deselects all items

// Re-renders the plugin


// Enables mobile scrolling

// Modifies the class(es)
// Replace Class
$('.selectpicker').selectpicker('setStyle', 'btn-danger');
// Add Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');
// Remove Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');

// Programmatically updates a select

// Programmatically toggles the select

// Hides the select

// Shows the select

// Destroy the select

6. Event handlers available.

$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
  // do something...

$('.selectpicker').on('show.bs.select', function (relatedTarget) {
  // do something...

$('.selectpicker').on('shown.bs.select', function (relatedTarget) {
  // do something...

$('.selectpicker').on('hide.bs.select', function (relatedTarget) {
  // do something...

$('.selectpicker').on('hidden.bs.select', function (relatedTarget) {
  // do something...

$('.selectpicker').on('loaded.bs.select', function () {
  // do something...

$('.selectpicker').on('rendered.bs.select', function () {
  // do something...

$('.selectpicker').on('refreshed.bs.select', function () {
  // do something...


v1.13.3 (2018-10-18)

  • Bugfixes
  • use sizeInfo.totalMenuWidth when determining dropdownAlignRight 'auto'

v1.13.2 (2018-09-16)

  • Add option to manually specify Bootstrap's version
  • Add support for Bootstrap dropdown's display property added in v4.1.0
  • Add check for $.fn.dropdown.Constructor
  • Improve readability of templates in createDropdown
  • Don't focus button if mobile option is set. use sibling selector to add focus style to button when select is focused. 

v1.13.1 (2018-08-25)

  • Fixed: HTML content in the subtext get escaped in 1.13.0
  • Fixed: Error retrieving Bootstrap version
  • Fixed: Bower description is too long
  • Fixed: noneSelectedText not working
  • Use innerHTML to set optgroup label
  • Don't change option selected status via changeAll if the option is disabled
  • Add option to manually specify Bootstrap's version
  • fix dividers in Bootstrap 4
  • use first option's class when calculating liHeight

v1.13.0 (2018-04-19)

  • Bugfixes
  • changed.bs.select now passes through previousValue as the third parameter (instead of the previous value of the option, which was redundant). This is the value of the select prior to being changed.
  • Supports Bootstrap 4 framework.


  • allow searching of options with data-content


  • fix data-width="fit"


  • Show the selected option when 1 option is selected and selectedTextFormat is count.


  • v2.2.5: Trim whitespace around selected options


  • v2.2.5


  • JS update


  • Plugin initialisation optimised


  • more configurations.

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