Select2
THIS MONTH
$58,356
LAST MONTH
$48,356
Basic Select2
To use add select2 class in select
tag.
Select
Single Select with selected menu
To use add selected to any
particuler menu.
Alaska
Percentage width to Select2(Responsive)
To use add give Pertage to the
select tag.
Select
Single Placeholder
Select2 supports displaying a placeholder value using the
placeholder configuration option.
The placeholder value will be displayed until a selection is
made.
×Alaska
Disabled Select2
Select2 will correctly handle disabled options, both with
data coming from a standard select (when the
disabled attribute is set) and
from remote sources, where the object has disabled: true
set.
Alaska
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.
Alaska
Select with Icon
To use add data-icon to set icon
with menu and use class
select2-with-icons in the select
tag.
Safari
Multiple Select
Select2 also support for mulitple select option.The select below is declared with the multiple attribute.
Basic Multiple Select
To add use .select2 class for
basic select2 control and additionally use
multiple="multiple" attribute for
multiple select box.
- ×New Mexico
- ×South Dakota
Percentage width to select2(Responsive)
To use add give Pertage to the
select tag.
- ×California
- ×Washington
- ×Wisconsin
Disabled with select multiple
Select2 will correctly handle
disabled options, both with data
coming from a standard select (when the disabled attribute
is set) and from remote sources, where the object has
disabled: true set.
- ×New Mexico
- ×South Dakota
Limitation in multiple select
To use add select2-max-length id
in select tag.
Select with Icon
To use add data-icon to set icon
with menu and use class
select2-with-icons in the select
tag.
- × HTML5
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.
Web DesignerLoading 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.
Loading remote dataLanguage 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"].
Alaska
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.
AlaskaTemplating with country Flag
To use add data-flag to set icon
with menu and use class
template-with-flag-icons in the
select tag.
Alaska
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.
- ×blue
- ×green
Automatic Tokenization
The separators that should be used when tokenizing can be specified using the tokenSeparators options. select2 supports ability to add choices automatically as the user is typing into the search field.
- ×white
- ×blue
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"].
Aeróbics
Programmatic Control
DOM single
To use add 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.
Alaska
DOM multiple
To use add 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.
Programmatic access
select2 also supports for programmatic access.To create new options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control
Programmatic Single
AlaskaProgrammatic Multiple
Color Options
Background Color
To use add class
.select2-with-bg with
data-bgcolor &
data-bgcolor-variation attributes
for background color of control.
Alaska
Menu Background Color
To use add class
.select2-with-menu-bg with
data-bgcolor &
data-bgcolor-variation attributes
for Menu Background color.
Full Background Color
To use add class
.select2-with-full-bg with
data-bgcolor &
data-bgcolor-variation attributes
for full select2 control background color.
Alaska
Border Color
To use add class
.select2-with-border with
data-border-color &
data-border-variation attributes class for Border color of
control.
Alaska
Multiple Select
Background Color
To use add class
.select2-with-bg with
data-bgcolor &
data-bgcolor-variation attributes
for background color of control.
- ×California
- ×Idaho
Menu Background Color
To use add class
.select2-with-menu-bg with
data-bgcolor &
data-bgcolor-variation attributes
for Menu Background color.
- ×Oklahoma
- ×Vermont
Full Background Color
To use add class
.select2-with-full-bg with
data-bgcolor &
data-bgcolor-variation attributes
for full select2 control background color.
- ×Alabama
- ×Texas
Border Color
To use add class
.select2-with-border with
data-border-color &
data-border-variation attributes class for Border color of
control.
- ×Kansas
- ×Michigan