select2/docs.md at develop · select2/select2 · GitHub
Description: Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. - select2/docs.md at develop · select2/select2

Skip to content

##
select2 / select2 Public

- Notifications
- Fork 6.3k
- Star 25.3k

Permalink
develop
Switch branches/tags

## select2/docs/pages/01.getting-started/02.basic-usage/docs.md

Go to file
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
kevin-brown Move documentation to the docs folder
Latest commit e0560c7 Sep 11, 2019
History
1 contributor

### Users who have contributed to this file

Single select boxes Multi-select boxes (pillbox)
106 lines (83 sloc) 2.89 KB
Raw Blame

title | taxonomy | process | never_cache_twig
--- | --- | --- | ---
Basic usage |
category
docs
twig
true
| true

##
Single select boxes

Select2 was designed to be a replacement for the standard `<select>` box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.

Select2 can take a regular select box like this...

and turn it into this...

    <select class="js-example-basic-single" name="state">
      <option value="AL">Alabama</option>
        ...
      <option value="WY">Wyoming</option>
    </select>

<script type="text/javascript" class="js-code-example-basic-single"> $(document).ready(function() { $('.js-example-basic-single').select2(); }); </script>

Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call `.select2()` on any jQuery selector where you would like to initialize Select2.

    // In your Javascript (external .js resource or <script> tag)
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });

> > > > > > The DOM cannot be safely manipulated until it is "ready". To make sure that your DOM is ready before the browser initializes the Select2 control, wrap your code in a `$(document).ready()` block. Only one `$(document).ready()` block is needed per page.

##
Multi-select boxes (pillbox)

Select2 also supports multi-value select boxes. The select below is declared with the `multiple` attribute.

In your HTML:

    <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
      <option value="AL">Alabama</option>
        ...
      <option value="WY">Wyoming</option>
    </select>

In your Javascript (external `.js` resource or `<script>` tag):

    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });

<script type="text/javascript"> $.fn.select2.amd.require([ "select2/core", "select2/utils" ], function (Select2, Utils, oldMatcher) { var $basicSingle = $(".js-example-basic-single"); var $basicMultiple = $(".js-example-basic-multiple"); $.fn.select2.defaults.set("width", "100%"); $basicSingle.select2(); $basicMultiple.select2(); function formatState (state) { if (!state.id) { return state.text; } var $state = $( '' + ' ' + state.text + '' ); return $state; }; }); </script>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.