bootstrap-select

For selects containing a large number of options, enable virtualScroll to improve performance. This ensures only items within the viewport are rendered.

• Set virtualScroll: true to enable it for all selects.
• Set virtualScroll to an integer to only enable virtualization if the select has at least that many options (e.g., virtualScroll: 600).

Set a placeholder

Use the title attribute on the <select> element to define the default placeholder text shown when nothing is selected.

Set alternative selected text

Use the title attribute on an individual <option> to define the text that is displayed in the button once that specific option is selected.

Format multiple selection text

For multiple select boxes, use data-selected-text-format to control how selected items are displayed. Supported values:

• values: A comma-delimited list of selected values (default).
• count: Shows the value if one is selected; otherwise shows "X of Y selected".
• count > x: Switches from values to count format once more than x items are selected.
• static: Always shows the select title (placeholder).

To enable a search box within the dropdown, set liveSearch: true. You can further customize the search behavior:

• liveSearchNormalize: Set to true for accent-insensitive searching.
• liveSearchPlaceholder: Provide a string to set the placeholder text in the search input.
• liveSearchStyle:
  • 'contains' (default): Shows options containing the search text.
  • 'startsWith': Shows only options starting with the search text.
  • Function: Provide a function (optionString, searchText) => boolean to define custom matching logic.
• noneResultsText: Customize the message shown when no matches are found (e.g., 'No results matched {0}').

To automatically initialize bootstrap-select on your select elements, add the selectpicker class to the <select> tag.

<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

You can disable elements within the select picker using standard HTML attributes:

• Disable the entire select box: Add the disabled attribute to the <select> element.
• Disable specific options: Add the disabled attribute to an <option> element.
• Disable option groups: Add the disabled attribute to an <optgroup> element.

<!-- Disabled Select Box -->
<select class="selectpicker" disabled>
  <option>Mustard</option>
</select>

<!-- Disabled Option -->
<select class="selectpicker">
  <option>Mustard</option>
  <option disabled>Ketchup</option>
</select>

<!-- Disabled Optgroup -->
<select class="selectpicker">
  <optgroup label="Picnic" disabled>
    <option>Mustard</option>
  </optgroup>
</select>

Use the data-max-options attribute to restrict how many items a user can select in a multiple select box. This attribute can also be applied to <optgroup> elements to limit selections within a specific group.

To customize the message shown when the limit is reached, use the maxOptionsText option (configuration via JavaScript).

<select class="selectpicker" multiple data-max-options="2">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

You can configure bootstrap-select options using HTML data attributes. To do this, append the option name to data-. For example, to set the style or the selected text format, use data-style="" or data-selected-text-format="count" on your <select> element.

Security Restriction: For security reasons, the following options cannot be supplied via data attributes and must be configured via JavaScript:

• sanitize
• sanitizeFn
• whiteList

Bootstrap-select has specific dependency requirements based on the version of Bootstrap you are using:

• Bootstrap v3: Requires jQuery v1.9.1+ and Bootstrap's dropdown.js component and CSS.
• Bootstrap v4+: Requires jQuery v1.9.1+, Bootstrap's dropdown.js component, Bootstrap's CSS, and Popper.js.

Note: Bootstrap 4 requires bootstrap-select v1.13.0 or higher. The library attempts to automatically detect your Bootstrap version, but manual configuration may be required if detection fails.

To use bootstrap-select, add the selectpicker class to your <select> element.

• Standard select: Use <select class="selectpicker">.
• With optgroups: Use <optgroup label="Group Name"> inside the select.
• Multiple select: Add the multiple attribute to the <select> element.

<!-- Standard -->
<select class="selectpicker">
  <option>Mustard</option>
</select>

<!-- With Optgroups -->
<select class="selectpicker">
  <optgroup label="Picnic">
    <option>Mustard</option>
  </optgroup>
</select>

<!-- Multiple -->
<select class="selectpicker" multiple>
  <option>Mustard</option>
</select>

You can add a search input to your select box by adding the data-live-search="true" attribute.

To improve searchability for specific options, use the data-tokens attribute to provide custom keywords that aren't necessarily in the visible text.

<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
</select>