Bootstrap Select
Use .form-controlclass for basic select control.
Use .custom-selectclass for Custom Select control.
Use multipleattribute for Multiple select control.
Use disabledattribute for disabled select control.
Select2
Use .select2class for basic select2 control.
Use optgroupattribute for basic select2 with Label control.
Use data attribute data-iconto add icon name for each options. And use class .select2-iconsto set icon with option.
Select2 supports custom themes using the theme option so you can style Select2 to match the rest of your application. These are using the classictheme, which matches the old look of Select2.
Multiple Select2
Use .select2class for basic select2 control. Use multiple="multiple"attribute for multiple select box.
Use optgroupattribute for multiple select box with Label control.
Use data attribute data-iconto add icon name for each options. And use class .select2-iconsto set icon with option.
Select2 multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the multipleattribute with maximumSelectionLengthin the select2 options.
Advance Options
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.
Select2 comes with AJAX support built in, using jQuery's AJAX methods. In this example, we can search for repositories using GitHub's API.
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.
Select2 supports methods that allow programmatic control of the component.
Size
For different sizes of select2, Use classes like .select2-size-sm& .select2-size-lgfor Large, small & Extra Small Select respectively.
Multi Select Size
For different sizes of select2, Use classes like .select2-size-sm& .select2-size-lgfor Large, small & Extra Small Select respectively.
Color
Use class .select2-bgwith data-bgcolor& data-bgcolor-variationattributes for background color of control.
Use class .select2-full-bgwith data-bgcolor& data-bgcolor-variationattributes for full select2 control background color.
Use class .select2-borderwith data-border-color& data-border-variationattributes class for Border color of control.
Color for Multi Select
Use class .select2-bgwith data-bgcolor& data-bgcolor-variationattributes for background color of control.
Use class .select2-full-bgwith data-bgcolor& data-bgcolor-variationattributes for full select2 control background color.
Use class .select2-borderwith data-border-color& data-border-variationattributes class for Border color of control.