Select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results. Read the Official Select2 Documentation for a full list of instructions and other options.

Basic Usage

Select2 was designed to be a replacement for the standard <select> box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.

$('.select2').select2();

With Search

Select2 by default does have a search box displayed but most of the time this template uses select2 without a search.

$('.select2').select2({
  placeholder: 'Choose one',
  searchInputPlaceholder: 'Search options'
});

Disabled State

Select2 will respond to the disabled attribute on select elements. You can also initialize Select2 with disabled: true to get the same effect.

<select class="form-control select2" disabled>...</select>

Multiple Box

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

<select class="form-control select2" multiple="multiple">...</select>

Clearable Selection

When set to true, causes a clear button close icon to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.

$('.select2').select2({
  placeholder: 'Choose one',
  allowClear: true
});

Limit Selection

Select2 multi-value select boxes can set restrictions regarding the maximum number of options that can be selected.

$('.select2').select2({
  placeholder: 'Choose one',
  maximumSelectionLength: 2
});

Components