Core functionality for initializing, configuring, and controlling selectpicker instances through the jQuery plugin interface.
Initialize selectpicker on jQuery-selected elements using the jQuery plugin pattern.
/**
* Initialize selectpicker with optional configuration
* @param options - Configuration object or method name for method calls
* @param args - Additional arguments for method calls
* @returns jQuery object for chaining
*/
$.fn.selectpicker(options?: SelectpickerOptions | string, ...args: any[]): JQuery;Usage Examples:
// Auto-initialization via CSS class
$('.selectpicker').selectpicker();
// Initialize with options
$('.selectpicker').selectpicker({
liveSearch: true,
maxOptions: 5,
size: 'auto'
});
// Initialize multiple elements with same config
$('select[data-role="selectpicker"]').selectpicker({
style: 'btn-primary',
width: '100%'
});Initialize selectpicker automatically using CSS classes and data attributes.
<!-- Auto-initialization with selectpicker class -->
<select class="selectpicker">
<option>Option 1</option>
<option>Option 2</option>
</select>
<!-- With data attributes for configuration -->
<select class="selectpicker"
data-live-search="true"
data-max-options="3"
data-style="btn-success">
<option>Option 1</option>
<option>Option 2</option>
</select>Access the underlying Selectpicker constructor class for advanced usage.
/**
* Direct access to Selectpicker constructor
*/
$.fn.selectpicker.Constructor: typeof Selectpicker;
/**
* Selectpicker constructor for manual instantiation
* @param element - HTML select element
* @param options - Configuration options
*/
class Selectpicker {
constructor(element: HTMLSelectElement, options: SelectpickerOptions);
}Usage Examples:
// Manual instantiation
const selectElement = document.querySelector('#mySelect');
const picker = new $.fn.selectpicker.Constructor(selectElement, {
liveSearch: true
});
// Access constructor for type checking
if (data instanceof $.fn.selectpicker.Constructor) {
// Handle selectpicker instance
}Restore previous value of $.fn.selectpicker and return selectpicker function.
/**
* Restore previous $.fn.selectpicker value and return selectpicker
* @returns The selectpicker function
*/
$.fn.selectpicker.noConflict(): typeof $.fn.selectpicker;Usage Examples:
// Save reference before potential conflicts
const bootstrapSelect = $.fn.selectpicker.noConflict();
// Use saved reference
$('.my-select').bootstrapSelect();Manage and control existing selectpicker instances.
/**
* Destroy selectpicker instance and restore original select
*/
.selectpicker('destroy'): JQuery;
/**
* Remove selectpicker instance (alias for destroy)
*/
.selectpicker('remove'): JQuery;Usage Examples:
// Initialize selectpicker
$('#mySelect').selectpicker();
// Later destroy the instance
$('#mySelect').selectpicker('destroy');
// Or use remove (same as destroy)
$('#mySelect').selectpicker('remove');
// Re-initialize after destruction
$('#mySelect').selectpicker({
liveSearch: true
});Call selectpicker methods on initialized instances.
/**
* Call method on selectpicker instance
* @param method - Method name to call
* @param args - Arguments to pass to method
* @returns Method return value or jQuery object
*/
.selectpicker(method: string, ...args: any[]): any;Usage Examples:
// Get current value
const value = $('#mySelect').selectpicker('val');
// Set new value
$('#mySelect').selectpicker('val', 'option2');
// Call method with multiple arguments
$('#mySelect').selectpicker('setStyle', 'btn-danger', 'add');
// Chain method calls
$('#mySelect')
.selectpicker('selectAll')
.selectpicker('render');Bootstrap Select automatically detects the Bootstrap version but allows manual override.
/**
* Manually specify Bootstrap version for compatibility
*/
$.fn.selectpicker.Constructor.BootstrapVersion: '3' | '4';Usage Examples:
// Force Bootstrap 3 compatibility
$.fn.selectpicker.Constructor.BootstrapVersion = '3';
// Force Bootstrap 4 compatibility
$.fn.selectpicker.Constructor.BootstrapVersion = '4';
// Auto-detection (default behavior)
delete $.fn.selectpicker.Constructor.BootstrapVersion;