Bootstrap 4 Dropdown Plugin with jQuery | Bootstrap-Select

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', '');
mySelect.selectpicker('val', ['','']);
// 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