21bac6a6d8
This adds correct links to the linked text on the front page under the features section. There is still one panel which needs to be written, the last one that includes the AJAX text again, before it can really be considered finished. The wording around the Bootstrap theme was adjusted pending further discussion about how that is going to be handled.
232 lines
6.4 KiB
HTML
232 lines
6.4 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.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><head></code>
|
|
section of your HTML.
|
|
</p>
|
|
|
|
<pre class="code prettyprint">
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
|
|
</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><select></code> element that you
|
|
want to make awesome.
|
|
</p>
|
|
|
|
<pre class="code prettyprint">
|
|
<script type="text/javascript">
|
|
$('select').select2();
|
|
</script>
|
|
</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><head></code>
|
|
section of your HTML.
|
|
</p>
|
|
|
|
<pre class="code prettyprint">
|
|
<link href="path/to/select2.min.css" rel="stylesheet" />
|
|
<script src="path/to/select2.min.js"></script>
|
|
</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>
|