Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. Demo page.

Usage

To use the plugin, you need to add the following files.

<!-- CSS -->
<link rel="stylesheet" href="libs/select2/css/select2.min.css" type="text/css">

<!-- Javascript -->
<script src="libs/select2/js/select2.min.js"></script>

Basic Example

<select class="select2-example">
  <option>Select</option>
  <option value="France">France</option>
  <option value="Brazil">Brazil</option>
  <option value="Yemen">Yemen</option>
  <option value="United States">United States</option>
  <option value="China">China</option>
  <option value="Argentina">Argentina</option>
  <option value="Bulgaria">Bulgaria</option>
</select>
$('.select2-example').select2({
    placeholder: 'Select'
});

Multi-select boxes

<select class="select2-example" multiple>
  <option>Select</option>
  <option value="France">France</option>
  <option value="Brazil">Brazil</option>
  <option value="Yemen">Yemen</option>
  <option value="United States">United States</option>
  <option value="China">China</option>
  <option value="Argentina">Argentina</option>
  <option value="Bulgaria">Bulgaria</option>
</select>
On this page