# Dropdown

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

## Usage

### CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

    <link rel="stylesheet" href="/docs/assets/vendor/select2/dist/css/select2.min.css">

### JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

    <script src="/docs/assets/vendor/select2/dist/js/select2.min.js"></script>

## Initialization

### Table

Add `data-toggle="select"` on any div in order to activate the sorting functionality.

## Example

    <form>
        <select class="form-control" data-toggle="select" title="Simple select" data-live-search="true" data-live-search-placeholder="Search ...">
            <option>Alerts</option>
            <option>Badges</option>
            <option>Buttons</option>
            <option>Cards</option>
            <option>Forms</option>
            <option>Modals</option>
        </select>
    </form>

### Placeholder

    <form>
        <select class="form-control" data-toggle="select" title="Simple select" data-placeholder="Select a state">
            <option>Alerts</option>
            <option>Badges</option>
            <option>Buttons</option>
            <option>Cards</option>
            <option>Forms</option>
            <option>Modals</option>
        </select>
    </form>

### Disabled select

    <form>
        <select class="form-control" data-toggle="select" data-placeholder="Disabled select" disabled>
            <option>Alerts</option>
            <option>Badges</option>
            <option>Buttons</option>
            <option>Cards</option>
            <option>Forms</option>
            <option>Modals</option>
        </select>
    </form>

### Disabled results

    <form>
        <select class="form-control" data-toggle="select" data-placeholder="Disabled results">
            <option>Alerts</option>
            <option>Badges</option>
            <option disabled>Buttons</option>
            <option>Cards</option>
            <option disabled>Forms</option>
            <option>Modals</option>
        </select>
    </form>

### Hide search box

    <form>
        <select class="form-control" data-toggle="select" data-minimum-results-for-search="Infinity">
            <option>Alerts</option>
            <option>Badges</option>
            <option>Buttons</option>
            <option>Cards</option>
            <option>Forms</option>
            <option>Modals</option>
        </select>
    </form>

### Multiple

    <form>
        <select class="form-control" data-toggle="select" multiple data-placeholder="Select multiple options">
            <option>Alerts</option>
            <option>Badges</option>
            <option>Buttons</option>
            <option>Cards</option>
            <option>Forms</option>
            <option>Modals</option>
        </select>
    </form>