Select - Usage

JavaScript usage of Bootstrap-select

Create your <select> with the .selectpicker class.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Enable Bootstrap-Select via JavaScript:

wvusUikit('.selectpicker').selectpicker();

Options can be passed via data attributes or JavaScript.

wvusUikit('.selectpicker').selectpicker({
  style: 'btn-info',
  size: 4
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-style="".

Name type default description
container string | false false appends the select to a specific element or selector, e.g., container: 'body' | '.main-body'
countSelectedText string '{0} of {1} selected' sets the format for the text displayed when selectedTextFormat is count or count > #. {0} is the selected amount. {1} is total available for selection.
dropupAuto boolean true checks to see which has more room, above or below. If the dropup has enough room to fully open normally, but there is more room above, the dropup still opens normally. Otherwise, it becomes a dropup. If dropupAuto is set to false, dropups must be called manually.
header string false adds a header to the top of the menu; includes a close button by default
hideDisabled boolean false removes disabled options and optgroups from the menu data-hide-disabled: true
selectedTextFormat 'values' | 'count' | 'count > #' (where # is an integer) null specifies how the selection is displayed with a multiple select (see here
size 'auto' | integer | false 'auto'

when set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off

set to false to always show all items
showSubtext boolean false subtext associated with a selected option will be displayed in the button data-show-subtext: true
showIcon boolean true Display icon(s) associated with selected option(s) in the button. If false, icons will not be displayed in the button.
showContent boolean true Display custom HTML associated with selected option(s) in the button. If false, the option value will be displayed instead.
style string | null null

apply a class to the button, see bootstrap buttons styles
title string | null null

Set the default text for bootstrap-select
width 'auto' | '#px' | '#%' | null (where # is an integer) null

auto automatically adjusts the width of the select to accommodate its widest option

set the width of the select manually, e.g. 300px or 50%

Methods

val()

You can set the selected value by calling the val method on the element.

wvusUikit('.selectpicker').selectpicker('val', 'Mustard');
wvusUikit('.selectpicker').selectpicker('val', ['Mustard','Relish']);

This is different to calling val() directly on the select element. If you call val() on the element directly the bootstrap-select ui will not refresh (as the change event only fires from user interaction). If you use val() directly, you will need to manually re-render the ui

wvusUikit('.selectpicker').val('Mustard');
wvusUikit('.selectpicker').selectpicker('render');

//this is the equivalent of the above
wvusUikit('.selectpicker').selectpicker('val', 'Mustard');

selectAll()

This will select all items in a multiple select.

wvusUikit('.selectpicker').selectpicker('selectAll');

deselectAll()

This will deselect all items in a multiple select.

wvusUikit('.selectpicker').selectpicker('deselectAll');

render()

You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.

wvusUikit('.selectpicker').selectpicker('render');

mobile()

Enable mobile scrolling by calling wvusUikit('.selectpicker').selectpicker('mobile'). The method for detecting the browser is left up to the user. This enables the device's native menu for select menus.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  wvusUikit('.selectpicker').selectpicker('mobile');
}

setStyle()

Modify the class(es) associated with either the button itself or its container.

If changing the class on the container:

wvusUikit('.selectpicker').addClass('span12').selectpicker('setStyle');

If changing the class(es) on the button (altering data-style):

// Replace Class
wvusUikit('.selectpicker').selectpicker('setStyle', 'btn-danger');

// Add Class
wvusUikit('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');

// Remove Class
wvusUikit('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');

refresh()

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

wvusUikit('.selectpicker').selectpicker('refresh');

<select class="selectpicker remove-example">
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
</select>

<button class="btn btn-warning rm-mustard">Remove Mustard</button>
<button class="btn btn-danger rm-ketchup">Remove Ketchup</button>
<button class="btn btn-success rm-relish">Remove Relish</button>
wvusUikit('.rm-mustard').click(function() {
  wvusUikit('.remove-example').find('[value=Mustard]').remove();
  wvusUikit('.remove-example').selectpicker('refresh');
});

wvusUikit('.ex-disable').click(function() {
  wvusUikit('.disable-example').prop('disabled',true);
  wvusUikit('.disable-example').selectpicker('refresh');
});
wvusUikit('.ex-enable').click(function() {
  wvusUikit('.disable-example').prop('disabled',false);
  wvusUikit('.disable-example').selectpicker('refresh');
});

hide()

To programmatically hide the bootstrap-select use the hide method to hide it.

wvusUikit('.selectpicker').selectpicker('hide');

show()

To programmatically show the bootstrap-select use the show method to show it.

wvusUikit('.selectpicker').selectpicker('show');