Select2 supports displaying a placeholder value using the placeholder configuration option. The placeholder value will be displayed until a selection is made.
Disabled Select2
Select2 will correctly handle disabled options, both with data coming from a standard select attribute disabled is set and from remote sources, where the object has disabled: true set.
Hiding Search Element
Select2 allows you to hide the search box using the minimumResultsForSearch configuration option. In this example, we use the value Infinity to tell Select2 to never display the search box.
Select with Icon
Use add data-icon to set icon with menu and use class select2-with-icons in the select tag.
Multiple Select
Basic Multiple Select
Use class .select2 for basic select2 control and additionally use attribute multiple="multiple" for multiple select box.
Percentage width to Select2(Responsive)
Use add give Pertage to the select tag.
Disabled with select multiple
Select2 will correctly handle disabled options, both with data coming from a standard select attribute disabled is set and from remote sources, where the object has disabled: true set.
Limitation in multiple select
Use add select2-max-length in select tag.
Select with Icon
Use add data-icon to set icon with menu and use class select2-with-icons in the select tag.
Advance Options
Loading Array Data
You may use the data configuration option to load dropdown options 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.
Language Files
Select2 can load message translations for different languages from language files. When using translations provided by Select2, you must make sure to include the translation file in your page after Select2.The language does
not have to be defined when Select2 is being initialized, but instead can be defined in the attribute [lang] of any parent elements as [lang="es"].
Support template
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.
Templating with country Flag
Use add data-flag to set icon with menu and use class template-with-flag-icons in the select tag.
Multiple Select Options
Support Tag
Tagging can also be used in multi-value select boxes. In the example below, we set the multiple="multiple" attribute on a Select2 control that also has tags: true enabled.
How results are matched
When users filter down the results by entering search terms into the search box, Select2 uses an internal "matcher" to match search terms to results. You may customize the way that Select2 matches search terms by specifying
a callback for the matcher configuration option.
RTL support with multiSelect
Select2 will work on RTL websites if the dir attribute is set on the <select> or any parents of it. You can also initialize Select2 with dir: "rtl" set.
Language Files
Select2 can load message translations for different languages from language files. When using translations provided by Select2, you must make sure to include the translation file in your page after Select2.The language does
not have to be defined when Select2 is being initialized, but instead can be defined in the [lang] attribute of any parent elements as [lang="es"].
Programmatic Control
DOM Single
use add class js-events class in the select tag and it will fire event when you click on the select and choose any option and finally close it.
DOM Multiple
use add class js-events class in the select tag and it will fire event when you click on the select and choose any option and finally close it.