Methods for getting, setting, and manipulating selected values and options in selectpicker instances.
Retrieve or update the selected value(s) of the selectpicker.
/**
* Get the current selected value(s)
* @returns Single value for single select, array for multiselect
*/
.selectpicker('val'): string | string[];
/**
* Set selected value(s)
* @param value - Value or array of values to select
* @returns jQuery object for chaining
*/
.selectpicker('val', value: string | string[]): JQuery;Usage Examples:
// Get current value (single select)
const selectedValue = $('#singleSelect').selectpicker('val');
// Returns: 'option1'
// Get current values (multiselect)
const selectedValues = $('#multiSelect').selectpicker('val');
// Returns: ['option1', 'option3']
// Set single value
$('#singleSelect').selectpicker('val', 'option2');
// Set multiple values
$('#multiSelect').selectpicker('val', ['option1', 'option3', 'option5']);
// Clear selection (single select)
$('#singleSelect').selectpicker('val', '');
// Clear all selections (multiselect)
$('#multiSelect').selectpicker('val', []);Select all available options in a multiselect selectpicker.
/**
* Select all available options (multiselect only)
* @returns jQuery object for chaining
*/
.selectpicker('selectAll'): JQuery;Usage Examples:
// Select all options in multiselect
$('#multiSelect').selectpicker('selectAll');
// Select all and then refresh display
$('#multiSelect')
.selectpicker('selectAll')
.selectpicker('render');
// Event handling with select all
$('#selectAllBtn').click(function() {
$('#multiSelect').selectpicker('selectAll');
});Remove selection from all options in a multiselect selectpicker.
/**
* Deselect all options (multiselect only)
* @returns jQuery object for chaining
*/
.selectpicker('deselectAll'): JQuery;Usage Examples:
// Deselect all options
$('#multiSelect').selectpicker('deselectAll');
// Clear selection and refresh
$('#multiSelect')
.selectpicker('deselectAll')
.selectpicker('render');
// Event handling with deselect all
$('#clearBtn').click(function() {
$('#multiSelect').selectpicker('deselectAll');
});Work with individual options programmatically by modifying the underlying select element.
/**
* Add new option to select (requires refresh)
* Standard HTML select manipulation followed by refresh
*/
// Add option, then refresh selectpicker
$('#mySelect').append('<option value="new">New Option</option>').selectpicker('refresh');
/**
* Remove option from select (requires refresh)
* Standard HTML select manipulation followed by refresh
*/
// Remove option, then refresh selectpicker
$('#mySelect option[value="remove"]').remove();
$('#mySelect').selectpicker('refresh');Usage Examples:
// Add single option
$('#mySelect')
.append('<option value="dynamic1">Dynamic Option 1</option>')
.selectpicker('refresh');
// Add multiple options
const newOptions = [
'<option value="dyn1">Dynamic 1</option>',
'<option value="dyn2">Dynamic 2</option>',
'<option value="dyn3">Dynamic 3</option>'
];
$('#mySelect')
.append(newOptions.join(''))
.selectpicker('refresh');
// Remove specific option
$('#mySelect')
.find('option[value="unwanted"]')
.remove()
.end()
.selectpicker('refresh');
// Replace all options
const newOptionsList = [
'<option value="a">Option A</option>',
'<option value="b">Option B</option>',
'<option value="c">Option C</option>'
];
$('#mySelect')
.empty()
.append(newOptionsList.join(''))
.selectpicker('refresh');Control the enabled/disabled state of individual options.
/**
* Enable or disable specific options
* Modify disabled attribute on option elements, then refresh
*/
// Enable/disable options, then refresh selectpicker
$('#mySelect option[value="specific"]').prop('disabled', true);
$('#mySelect').selectpicker('refresh');Usage Examples:
// Disable specific option
$('#mySelect')
.find('option[value="restricted"]')
.prop('disabled', true)
.end()
.selectpicker('refresh');
// Enable previously disabled option
$('#mySelect')
.find('option[value="restricted"]')
.prop('disabled', false)
.end()
.selectpicker('refresh');
// Disable multiple options
$('#mySelect')
.find('option[data-restricted="true"]')
.prop('disabled', true)
.end()
.selectpicker('refresh');
// Toggle option state
const $option = $('#mySelect option[value="toggle"]');
$option.prop('disabled', !$option.prop('disabled'));
$('#mySelect').selectpicker('refresh');Check selection state and validate selections programmatically.
/**
* Check if specific value is selected
*/
function isSelected(selectElement: JQuery, value: string): boolean {
const selected = selectElement.selectpicker('val');
return Array.isArray(selected) ? selected.includes(value) : selected === value;
}
/**
* Get selection count
*/
function getSelectionCount(selectElement: JQuery): number {
const selected = selectElement.selectpicker('val');
return Array.isArray(selected) ? selected.length : (selected ? 1 : 0);
}Usage Examples:
// Check if specific value is selected
function isSelected(selectElement, value) {
const selected = selectElement.selectpicker('val');
return Array.isArray(selected) ? selected.includes(value) : selected === value;
}
if (isSelected($('#mySelect'), 'important-option')) {
console.log('Important option is selected');
}
// Get selection count
function getSelectionCount(selectElement) {
const selected = selectElement.selectpicker('val');
return Array.isArray(selected) ? selected.length : (selected ? 1 : 0);
}
const count = getSelectionCount($('#multiSelect'));
console.log(`${count} options selected`);
// Validate minimum selection
const minRequired = 2;
if (getSelectionCount($('#multiSelect')) < minRequired) {
alert(`Please select at least ${minRequired} options`);
}
// Validate maximum selection
const maxAllowed = 5;
if (getSelectionCount($('#multiSelect')) > maxAllowed) {
$('#multiSelect').selectpicker('deselectAll');
alert(`Maximum ${maxAllowed} selections allowed`);
}