or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddisplay.mdevents.mdindex.mdinitialization.mdinternationalization.mdselection.md
tile.json

initialization.mddocs/

Initialization and Control

Core functionality for initializing, configuring, and controlling selectpicker instances through the jQuery plugin interface.

Capabilities

Plugin Initialization

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%'
});

HTML Data Attribute Initialization

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>

Constructor Access

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
}

No Conflict Mode

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();

Instance Management

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
});

Method Calls

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 Version Detection

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;