Bootstrap Select
Basic Select
Use .form-control class for basic select control.
Custom Select
Use .custom-select class for Custom Select control.
Multiple Select
Use multiple attribute for Multiple select control.
Disabled Select
Use disabled attribute for disabled select control.
Input Group Select
Basic Select with Input Group
Custom Select with Input group
Select2
Basic Select2
Use .select2 class for basic select2 control.
Single Select with Label
Use optgroup attribute for basic select2 with Label control.
Select With Icon
Use data attribute data-icon to add icon name for each options. And use class
.select2-icons to set icon with option.
Template support
Select2 supports custom themes using the theme option so you can style Select2 to match the rest of
your application. These are using the classic theme, which matches the old look of
Select2.
Multiple Select2
Basic Multiple Select2
Use .select2 class for basic select2 control. Use multiple="multiple"
attribute for multiple select box.
Multiple Select with Label
Use optgroup attribute for multiple select box with Label control.
Select With Icon
Use data attribute data-icon to add icon name for each options. And use class
.select2-icons to set icon with option.
Maximum Select with Label
Select2 multi-value select boxes can set restrictions regarding the maximum number of options
selected. The select below is declared with the multiple attribute with
maximumSelectionLength in the select2 options.
Select2 with Light Background Options
Use .select-light-{colorName} class for light background to selected Options.
Advance Options
Loading Array Data
Select2 provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.
Loading Remote Data
Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API.
Customizing How Results Are Matched
Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere: This custom matcher uses a compatibility module that is only bundled in the full version of Select2. You also have the option of using a more complex matcher.
Programmatic access
Select2 supports methods that allow programmatic control of the component.
Size
For different sizes of select2, Use classes like .select2-size-sm &
.select2-size-lg for Large, small & Extra Small Select respectively.
Large
Default
Small
Multi Select Size
For different sizes of select2, Use classes like .select2-size-sm &
.select2-size-lg for Large, small & Extra Small Select respectively.
