Flexible Bootstrap 4 Dropdown Plugin With jQuery - Bootstrap 4 Select

Flexible Bootstrap 4 Dropdown Plugin With jQuery - Bootstrap 4 Select

This is a jQuery extension for the Silviomoreto's Bootstrap Select plugin that enhances the default Bootstrap 4 dropdown components with live search, multiple selection, custom styling, select/deselect all support.

1. Include the necessary Bootstrap 4 framework and other required resources on the web page.

<link rel="stylesheet" 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>

2. Include the JavaScript bootstrap-select.js and style sheet bootstrap-select.css on the page.

<link rel="stylesheet" href="bootstrap-select.css">
<script src="bootstrap-select.js"></script>

3. Call the plugin with default options on the existing select element and done.

var mySelect = $('select').selectpicker();;

4. The plugin comes with lots of configuration options to customize the Bootstrap 4 dropdown components. Override the values as displayed below and pass them as an object to the selectpicker function.

var mySelect = $('select').selectpicker({
    // text for no selection
    noneSelectedText: 'Nothing selected',
    // text for no result
    noneResultsText: 'No results matched {0}',
    // Sets the format for the text displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection.
    // When set to a function, the first parameter is the number of selected options, and the second is the total number of options. 
    // The function must return a string.
    countSelectedText: function (numSelected, numTotal) {
      return (numSelected == 1) ? "{0} item selected" : "{0} items selected";
    // The text that is displayed when maxOptions is enabled and the maximum number of options for the given scenario have been selected.
    // If a function is used, it must return an array. array[0] is the text used when maxOptions is applied to the entire select element. array[1] is the text used when maxOptions is used on an optgroup. 
    // If a string is used, the same text is used for both the element and the optgroup.
    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 button
    selectAllText: 'Select All',
    // Text for Deselect All button
    deselectAllText: 'Deselect All',
    // Shows done button
    doneButton: false,
    // Text for done button
    doneButtonText: 'Close',
    // custom separator
    multipleSeparator: ', ',
    // button styles
    styleBase: 'btn',
    style: 'btn-default',
    // dropdown size
    size: 'auto',
    // dropdown title
    title: null,
    // 'values' | 'static' | 'count' | 'count > x'
    selectedTextFormat: 'values',
    // dropdown width
    width: false,
    // e.g., container: 'body' | '.main-body'
    container: false,
    // hide disabled options
    hideDisabled: false,
    // shows sub text
    showSubtext: false,
    // shows icon
    showIcon: true,
    // shows content
    showContent: true,
    // auto dropup
    dropupAuto: true,
    // shows dropdown header
    header: false,
    // live search options
    liveSearch: false,
    liveSearchPlaceholder: null,
    liveSearchNormalize: false,
    liveSearchStyle: 'contains',
    // enables Select All / Deselect All box
    actionsBox: false,
    // icons
    iconBase: 'glyphicon',
    tickIcon: 'glyphicon-ok',
    // shows checkmark on selected option
    showTick: false,
    // custom template
    template: {
      caret: '<span class="caret"></span>'
    // string | array | function
    maxOptions: false,
    // enables the device's native menu for select menus
    mobile: false,
    // treats the tab character like the enter or space characters within the selectpicker dropdown.
    selectOnTab: false,
    // Align the menu to the right instead of the left.
    dropdownAlignRight: false,
    // e.g. [top, right, bottom, left]
    windowPadding: 0

5. API methods.

var mySelect = $('select').selectpicker({
    // options here
// Sets the selected value
mySelect.selectpicker('val', 'JQuery');
mySelect.selectpicker('val', ['jQuery','Script']);
// Selects all items
// Clears all
// Re-render
// Enables mobile scrolling
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// Sets styles
// Replace Class
mySelect.selectpicker('setStyle', 'btn-danger');
// Add Class
mySelect.selectpicker('setStyle', 'btn-large', 'add');
// Remove Class
mySelect.selectpicker('setStyle', 'btn-large', 'remove');
// Refreshes
// Toggles the drop down list
// Hides the drop down list
// Shows the drop down list
// Destroys the drop down list

6. Event handlers.

mySelect.on('show.bs.select', function (e) {
  // on show
mySelect.on('shown.bs.select', function (e) {
  // on shown
mySelect.on('hide.bs.select', function (e) {
  // on hide
mySelect.on('hidden.bs.select', function (e) {
  // do hidden
mySelect.on('loaded.bs.select', function (e) {
  // on loaded
mySelect.on('rendered.bs.select', function (e) {
  // on rendered
mySelect.on('refreshed.bs.select', function (e) {
  // on refreshed
mySelect.on('changed.bs.select', function (e) {
  // on changed

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

  • Publication date: 15.11.2017
  • Source