171 lines
4.9 KiB
HTML
171 lines
4.9 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">
|
|
<i class="fa fa-arrow-down fa-lg"></i>
|
|
Download
|
|
</a>
|
|
</p>
|
|
<p class="version">
|
|
<strong>Version</strong> 4.0.0<em>-rc.2</em>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<section class="notice-previous">
|
|
<div class="container">
|
|
<a href="http://select2.github.io/select2/">Looking for the Select2 3.5.2 docs?</a>
|
|
We have moved them to a new location
|
|
<a href="announcements-4.0.html">while we push forward with Select2 4.0</a>.
|
|
</div>
|
|
</section>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
Include the following lines of code in the <code><head></code>
|
|
section of your HTML.
|
|
|
|
<pre class="code prettyprint">
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet" />
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/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>
|
|
Initialize Select2 on the <code><select></code> element that you
|
|
want to make awesome.
|
|
|
|
<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>
|
|
<a href="https://github.com/select2/select2/tags">
|
|
Download the code
|
|
</a>
|
|
from GitHub and copy the <code>dist</code> directory to your project.
|
|
</li>
|
|
<li>
|
|
Include the following lines of code in the <code><head></code>
|
|
section of your HTML.
|
|
|
|
<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>
|