Methods

Methods can be called on the select element to control the bootstrap-select instance.


.selectpicker('val')

Sets the selected value. This is the preferred method for changing the value, as it properly updates the UI.

// Set a single value
$('.selectpicker').selectpicker('val', 'Mustard');

// Set multiple values
$('.selectpicker').selectpicker('val', ['Mustard', 'Relish']);

.selectpicker('selectAll')

Selects all items in a multi-select dropdown.

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

.selectpicker('deselectAll')

Deselects all items in a multi-select dropdown.

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

.selectpicker('render')

Forces a re-render of the bootstrap-select UI. This is useful if you programmatically change underlying values that affect the layout.

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

.selectpicker('refresh')

Updates the UI to match the new state of the <select> element. This is essential when you add, remove, disable, or enable options programmatically.

// Example: Removing an option
$('.my-select').find('[value=Mustard]').remove();
$('.my-select').selectpicker('refresh');

// Example: Disabling the select
$('.my-select').prop('disabled', true);
$('.my-select').selectpicker('refresh');

.selectpicker('toggle')

Programmatically toggles the bootstrap-select menu open or closed.

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

.selectpicker('open') and .selectpicker('close')

Programmatically open or close the menu.

// Open the menu
$('.selectpicker').selectpicker('open');

// Close the menu
$('.selectpicker').selectpicker('close');

.selectpicker('show') and .selectpicker('hide')

Programmatically show or hide the entire component.

// Hide the component
$('.selectpicker').selectpicker('hide');

// Show the component
$('.selectpicker').selectpicker('show');

.selectpicker('destroy')

Removes the bootstrap-select functionality and returns the <select> element to its original state.

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