Basic usage
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
With placeholder
Select2 supports displaying a placeholder value using the data-placeholder attribute. The placeholder value will be displayed until a selection is made.
With optgroups
Select2 support group related options with <optgroup> tags
Multiple select boxes
Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.
Limit selection
Limit the number of options that can be selected via the data-maximum-selection-length attribute.
Live search
You can add a search input by passing data-select2-search="true" attribute.
Creatable
In addition to a prepopulated menu of options, Select2 can dynamically create new options from text input by the user in the search box. This feature is called "tagging". To enable tagging, set the data-tags attribute to true.
Custom content
To enable custom content, set the data-select2-content attribute to true.
Insert custom HTML into the option with the data-content attribute.
Sizing
Set size with data-select2-size attribute.
Clearable
Add a clear button ("x" 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.