| Current Path : /proc/3/root/usr/local/rvglobalsoft/rvglobalsoftmanager/themes/vendors/select2/docs/ |
| Current File : //proc/3/root/usr/local/rvglobalsoft/rvglobalsoftmanager/themes/vendors/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.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>
Copyright 2K16 - 2K18 Indonesian Hacker Rulez
;?>)