238 lines
6.5 KiB
HTML
238 lines
6.5 KiB
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.3</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="s2-docs-featurette">
|
||
|
|
<div class="row">
|
||
|
|
<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-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 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/select2/select2-bootstrap-theme">optional theme for Bootstrap 3</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<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-html5"></i>
|
||
|
|
<h4>Full browser support</h4>
|
||
|
|
<p>Support for both modern and legacy browsers is built-in, even including Internet Explorer 8.</p>
|
||
|
|
</div>
|
||
|
|
</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="https://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><head></code>
|
||
|
|
section of your HTML.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{% highlight html %}
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<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><select></code> element that you
|
||
|
|
want to make awesome.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{% highlight html %}
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('select').select2();
|
||
|
|
</script>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
</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><head></code>
|
||
|
|
section of your HTML.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{% highlight html %}
|
||
|
|
<link href="path/to/select2.min.css" rel="stylesheet" />
|
||
|
|
<script src="path/to/select2.min.js"></script>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
</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>
|