Select2 – The jQuery replacement for Select Boxes


The Select Form Field Select2 is the encompassing profi Tool under the whole Select-Replacement scripts. It has dozens of options in the constructor and many configuration possibilities through custom attributes on the source field as well. It is completely translatable and supports 8, 8, 10, 10.6 and 3, but you may need an older jQuery version, which supports this browser too.

The Script itself comes also with an complete exensible environment, dynamic manipulation of the options and AJAX / RemoteData Support. Select2 is also available for Django, Drupal, Meteor, Ruby on Rails, Wicket, Yii2 and – of course – AngularJS. Official custom Themes, like Bootstrap3, FlatUI and MetroUI are currently present and usable as well!

Download the latest version of Select2 as .ZIP or as .TAR package!

npm i select2 --save

yarn add select2 --save

bower install select2 --save


The package itself contains some default stylings, available as normal and minified CSS Stylesheet. The JavaScript itself is available in a “Default User” and “Full Featured” Version, both are available as minified and unminified file. The i18n folder contains contains to it also 56 different languages, so there should be something suitable for the most use cases and websites.


Load Select2

We recommend to load the Stylesheet directly in the HTML header within your Document. The JavaScript itself should be loaded directly after the opened HTML <body> tag. Theoretically, you can put this somewhere else too, just make sure, that jQuery is loaded BEFORE you include the Script.

<!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/select2.css" />
        <!-- Required jQuery Library -->
        <script type="text/javascript" src=""></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/select2.min.js"></script>


Configure Select2

It would be impossible to include the complete documentation on a single page and keep the use- and readability. So we highly recommend to visit and read the official documentation which is really well laid out. Nevertheless, we let at least a few configuration options here:

        adaptContainerCssClass:     null,
        adaptDropdownCssClass:      null,
        ajax:                       null,
        allowClear:                 false,
        amdBase:                    "./"
        amdLanguageBase:            "./i18n/"
        closeOnSelect:              true,
        containerCss:               null,
        data:                       null,
        dataAdapter:                SelectAdapter,
        debug:                      false,
        dir:                        null,
        disabled:                   false,
        dropdownAdapter:            DropdownAdapter,
        dropdownAutoWidth:          false,
        dropdownCss:                null,
        dropdownCssClass:           "",
        dropdownParent:             $(document.body),
        escapeMarkup:               Utils.escapeMarkup,
        initSelection:              function(){ },          # Deprecated
        language:                   "en",
        matcher:                    function(){ },
        maximumInputLength:         0,
        maximumSelectionLength:     0,
        minimumInputLength:         0,
        minimumResultsForSearch:    0,
        multiple:                   false,
        placeholder:                null,
        query:                      Query,                   # Deprecated
        resultsAdapter:             ResultsAdapter,
        selectionAdapter:           SingleSelection,
        selectOnClose:              false,
        sorter:                     function(){ },
        tags:                       false,
        templateResult:             function(){ },
        templateSelection:          function(){ },
        theme:                      "default",
        tokenizer:                  function(){ },
        tokenSeparators:            [],
        width:                      "resolve"


Configure: Options

Provides support for ajax data sources.
Provides support for clearable selections.
Controls whether the dropdown is closed after a selection is made.
Used to override the built-in DataAdapter.
Enable debugging messages in the browser console.
When set to true, the select control will be disabled.
Allows you to customize placement of the dropdown.
Specify the language used for Select2 messages.
Maximum number of characters that may be provided for a search term.
The maximum number of items that may be selected in a multi-select control. If the value of this option is less than 1, the number of selected items will not be limited.
Minimum number of characters required to start a search.
The minimum number of results required to display the search box.
This option enables multi-select (pillbox) mode. Select2 will automatically map the value of the multiple HTML attribute to this option during initialization.
Specifies the placeholder for the control.
Implements automatic selection when the dropdown is closed.
Used to enable free text responses.
Customizes the way that search results are rendered.
Customizes the way that selections are rendered.
Allows you to set the theme.
A callback that handles automatic tokenization of free-text entry.
The list of characters that should be used as token separators.
Supports customization of the container width.

Leave a Reply