select2/docs/index.html

---
layout: home
title: Select2 - The jQuery replacement for select boxes
slug: home
---

<main class="jumbotron" role="main">
  <div class="container text-center">
    <h1>Select2</h1>
    <p class="lead">
      The jQuery replacement for select boxes
    </p>
    <p>
      <a href="https://github.com/select2/select2/releases" class="btn btn-outline-inverse btn-lg">
        Download Select2
      </a>
    </p>
    <p class="version">
      Currently v4.0.0</a>
    </p>
  </div>
</main>

{% include notice-previous.html %}

<div class="container">
  <section id="lead" class="lead">
    Select2 gives you a customizable select box with support for searching,
    tagging, remote data sets, infinite scrolling, and many other highly used
    options.
  </section>

  <hr class="half-rule">

  <div class="row s2-docs-featurette">
    <div class="col-sm-4">
      <i class="fa fa-language"></i>
      <h4>In your language</h4>
      <p>
        Select2 comes with support for
        <a href="examples.html#rtl">RTL environments</a>,
        <a href="examples.html#diacritics">searching with diacritics</a> and
        <a href="examples.html#language">over 40 languages</a> built-in.</p>
    </div>

    <div class="col-sm-4">
      <i class="fa fa-paint-brush"></i>
      <h4>Fits in with your theme</h4>
      <p>
        Fully skinnable, CSS built with Sass and an
        <a href="https://github.com/fk/select2-bootstrap-theme">optional theme for Bootstrap 3</a>.
      </p>
    </div>

    <div class="col-sm-4">
      <i class="fa fa-database"></i>
      <h4>Remote data support</h4>
      <p>
        <a href="examples.html#data-ajax">Using AJAX</a> you can efficiently
        search large lists of items.</p>
    </div>
  </div>

  <div class="row s2-docs-featurette">
    <div class="col-sm-4">
      <i class="fa fa-plug"></i>
      <h4>Fully extensible</h4>
      <p>
        The <a href="announcements-4.0.html#plugin-system">plugin system</a>
        allows you to easily customize Select2 to work exactly how you want it
        to.
      </p>
    </div>

    <div class="col-sm-4">
      <i class="fa fa-tag"></i>
      <h4>Dynamic item creation</h4>
      <p>
        Allow users to type in a new option and
        <a href="examples.html#tags">add it on the fly</a>.
      </p>
    </div>

    <div class="col-sm-4">
      <i class="fa fa-plug"></i>
      <h4>Remote data support</h4>
      <p><a href="#">Using AJAX</a> you can efficiently search large lists of items.</p>
    </div>
  </div>

  <hr class="half-rule">

  <section id="getting-started">
    <h2>
      Getting started with Select2
    </h2>

    <p>
      In order to use Select2, you must include the JavaScript and CSS file on
      your website. You can get these files built for you from many different
      locations.
    </p>

    <h3>
      Using Select2 from a CDN
    </h3>

    <p>
      Select2 is hosted on both the
      <a href="https://cdnjs.com/libraries/select2">cdnjs</a> and
      <a href="http://www.jsdelivr.com/#!select2">jsDelivr</a> CDNs, allowing
      you to quickly include Select2 on your website.
    </p>

    <ol>
      <li>
        <p>
          Include the following lines of code in the <code>&lt;head&gt;</code>
          section of your HTML.
        </p>

<pre class="code prettyprint">
&lt;link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"&gt;&lt;/script&gt;
</pre>

        <div class="alert alert-info">
          <i class="fa fa-info-circle"></i>
          Immediately following a new release, it takes some time for CDNs to
          catch up and get the new versions live on the CDN.
        </div>
      </li>
      <li>
        <p>
          Initialize Select2 on the <code>&lt;select&gt;</code> element that you
          want to make awesome.
        </p>

<pre class="code prettyprint">
&lt;script type="text/javascript"&gt;
  $('select').select2();
&lt;/script&gt;
</pre>
      </li>
      <li>
        Check out the <a href="examples.html">examples page</a> to start using
        the additional features of Select2.
      </li>
    </ol>

    <h3>
      Downloading the code locally
    </h3>

    <p>
      In some situations, you can't use Select2 from a CDN and you must include
      the files through your own static file servers.
    </p>

    <ol>
      <li>
        <p>
          <a href="https://github.com/select2/select2/tags">
            Download the code
          </a>
          from GitHub and copy the <code>dist</code> directory to your project.
        </p>
      </li>
      <li>
        <p>
          Include the following lines of code in the <code>&lt;head&gt;</code>
          section of your HTML.
        </p>

<pre class="code prettyprint">
&lt;link href="path/to/select2.min.css" rel="stylesheet" /&gt;
&lt;script src="path/to/select2.min.js"&gt;&lt;/script&gt;
</pre>
      </li>
      <li>
        Check out the <a href="examples.html">examples page</a> to start using
        the additional features of Select2.
      </li>
    </ol>
  </section>

  <section id="builds">
    <h2>
      The different Select2 builds
    </h2>

    <p>
      Select2 provides multiple builds that are tailored to different
      environments where it is going to be used. If you think you need to use
      Select2 in a nonstandard environment, like when you are using AMD, you
      should read over the list below.
    </p>

    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Build name</th>
          <th>When you should use it</th>
        </tr>
      </thead>
      <tbody>
        <tr id="builds-standard">
          <td>
            Standard (<code>select2.js</code> / <code>select2.min.js</code>)
          </td>
          <td>
            This is the build that most people should be using for Select2. It
            includes the most commonly used features.
          </td>
        </tr>
        <tr id="builds-full">
          <td>
            Full (<code>select2.full.js</code> / <code>select2.full.min.js</code>)
          </td>
          <td>
            You should only use this build if you need the additional features
            from Select2, like the
            <a href="options.html#compatibility">compatibility modules</a> or
            recommended includes like
            <a href="https://github.com/jquery/jquery-mousewheel">jquery.mousewheel</a>
          </td>
        </tr>
      </tbody>
    </table>
  </section>
</div>