Methods

Interface with bootstrap-select.

---

.selectpicker('val')

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

$('.selectpicker').selectpicker('val', 'Mustard');
$('.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). You will have to call the ui refresh method yourself.

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

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

---

.selectpicker('selectAll')

This will select all items in a multi-select.

$('.selectpicker').selectpicker('selectAll');

---

.selectpicker('deselectAll')

This will deselect all items in a multi-select.

$('.selectpicker').selectpicker('deselectAll');

---

.selectpicker('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.

$('.selectpicker').selectpicker('render');

---

.selectpicker('mobile')

Enable mobile scrolling by calling $('.selectpicker').selectpicker('mobile'). This enables the device's native menu for select menus.

The method for detecting the browser is left up to the user.

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

---

.selectpicker('setStyle')

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

If changing the class on the container:

$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');

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

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

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

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

---

.selectpicker('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.

$('.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>

$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});

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

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

---

.selectpicker('toggle')

Programmatically toggles the bootstrap-select menu open/closed.

$('.selectpicker').selectpicker('toggle');

---

.selectpicker('hide')

To programmatically hide the bootstrap-select use the hide method (this only affects the visibility of the bootstrap-select itself).

$('.selectpicker').selectpicker('hide');

---

.selectpicker('show')

To programmatically show the bootstrap-select use the show method (this only affects the visibility of the bootstrap-select itself).

$('.selectpicker').selectpicker('show');

---

.selectpicker('destroy')

To programmatically destroy the bootstrap-select, use the destroy method.

$('.selectpicker').selectpicker('destroy');