155 lines
4.0 KiB
HTML
155 lines
4.0 KiB
HTML
---
|
|
layout: home
|
|
title: Select2 - The jQuery replacement for select boxes
|
|
slug: home
|
|
---
|
|
|
|
<main class="jumbotron" role="main">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 text-center">
|
|
<h1>Select2</h1>
|
|
<p class="lead">
|
|
The jQuery replacement for select boxes
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 jumbotron-side">
|
|
<p>
|
|
<a href="https://github.com/select2/select2/releases" class="btn btn-success btn-lg">
|
|
<i class="fa fa-download fa-lg"></i>
|
|
Download
|
|
</a>
|
|
</p>
|
|
<p>
|
|
<strong>Version</strong> 4.0.0 <em>beta 1</em>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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 while we work on Select2 4.0.
|
|
</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">
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/select2.min.css" />
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/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">
|
|
<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">
|
|
<link href="path/to/select2.min.css" />
|
|
<script src="path/to/select2.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="about">
|
|
<h2>
|
|
About
|
|
</h2>
|
|
|
|
<ul>
|
|
<li>
|
|
<a href="https://github.com/select2/select2">
|
|
Source code, hosted on GitHub
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/select2/select2/issues">
|
|
Bug tracker
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="community.html">
|
|
Community and support
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|