Press "Enter" to skip to content

Bootstrap 4 dropdown plugin with jQuery | Bootstrap-Select

Bootstrap-select is a jQuery plugin that uses the Bootstrap.js dropdown menu to design and offer add-ons to standard selection elements.

JQuery plugin that brings select items into the 21st century with easy multi-selection, searchable, and more or now with Bootstrap 4 support.

How to make use of it:

1. Include the required Bootstrap 4 framework and different required sources on the internet web page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

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

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

3. Call the plugin with default choices on the present select component and carried out.

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

4. The plugin comes with plenty of configuration choices to customize the Bootstrap 4 dropdown elements.

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

    // textual content for no selection
    noneSelectedText: 'Nothing selected',

    // textual content for no result
    noneResultsText: 'No results matched {0}',

    // Sets the format for the textual content displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection.
    // When set to a perform, the primary parameter is the variety of chosen choices, and the second is the whole variety of choices. 
    // The perform should return a string.
    countSelectedText: function (numSelected, numTotal) {
      return (numSelected == 1) ? "{0} item selected" : "{0} items selected";
    },

    // The textual content that's displayed when maxOptions is enabled and the utmost variety of choices for the given situation have been chosen.
    // If a perform is used, it should return an array. array[0] is the textual content used when maxOptions is utilized to all the choose component. array[1] is the textual content used when maxOptions is used on an optgroup. 
    // If a string is used, the identical textual content is used for each 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',

    // customized 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,

    // reveals content
    showContent: true,

    // auto dropup
    dropupAuto: true,

    // shows dropdown header
    header: false,

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

    // permits Select All / Deselect All box
    actionsBox: false,

    // icons
    iconBase: 'glyphicon',
    tickIcon: 'glyphicon-ok',

    // shows checkmark on chosen possibility
    showTick: false,

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

    // string | array | function
    maxOptions: false,

    // permits the gadget's native menu for choose menus
    mobile: false,

    // treats the tab character just like the enter or house 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 strategies.

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

// Sets the selected value
mySelect.selectpicker('val', 'JQuery');
mySelect.selectpicker('val', ['jQuery','Script']);

// Selects all items
mySelect.selectpicker('selectAll');

// Clears all
mySelect.selectpicker('deselectAll');

// Re-render
mySelect.selectpicker('render');

// Enables mobile scrolling
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) 
  mySelect.selectpicker('mobile');


// 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
mySelect.selectpicker('refresh');

// Toggles the drop down list
mySelect.selectpicker('toggle');

// Hides the drop down list
mySelect.selectpicker('hide');

// Shows the drop down list
mySelect.selectpicker('show');

// Destroys the drop down list
mySelect.selectpicker('destroy');

6. Event handlers.

mySelect.on('show.bs.select', function (e) );

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) );

Bootstrap 4 Dropdown Select, bootstrap style select dropdown, bootstrap-select Plugin/Github


See Demo And Download

Official Website(heimrichhannot): Click Here

This superior jQuery/javascript plugin is developed by heimrichhannot. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *