### Select2

#### Basic

Use `select2()` function on select element to convert it to Select 2.

    <select class="form-control  basic">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>

    var ss = $(".basic").select2({
        tags: true,
    });

#### Small Select2

Use `data('select2')` function to get container of select2.

    <select class="form-control form-small">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>

    var formSmall = $(".form-small").select2({ tags: true });
    formSmall.data('select2').$container.addClass('form-control-sm')

#### Nested

Add options inside the `optgroups` to for group options.

    <select class="form-control nested">
        <optgroup label="Group1">
            <option selected="selected">orange</option>
            <option>white</option>
            <option>purple</option>
        </optgroup>
        <optgroup label="Group2">
            <option>purple</option>
            <option>orange</option>
            <option>white</option>
        </optgroup>
        <optgroup label="Group3">
            <option>white</option>
            <option>purple</option>
            <option>orange</option>
        </optgroup>
    </select>

    $(".nested").select2({
        tags: true
    });

#### Disabling options

Disable Select using `disabled` attribute.

    <select class="form-control disabled-results">
        <option value="one">First</option>
        <option value="two" disabled="disabled">Second</option>
        <option value="three">Third</option>
    </select>

    $(".disabled-results").select2();

#### Placeholder

Apply Placeholder by setting option `placeholder` option.

    <select class="placeholder js-states form-control">
        <option>Choose...</option>
        <option value="one">First</option>
        <option value="two">Second</option>
        <option value="three">Third</option>
        <option value="four">Fourth</option>
        <option value="five">Fifth</option>
    </select>

    $(".placeholder").select2({
        placeholder: "Make a Selection",
        allowClear: true
    });

#### Tagging with multi-value select boxes

Set `tags: true` to convert select 2 in Tag mode.

    <select class="form-control tagging" multiple="multiple">
        <option>orange</option>
        <option>white</option>
        <option>purple</option>
    </select>

    $(".tagging").select2({
        tags: true
    });

#### Limiting the number of Tagging

Set `maximumSelectionLength: 2` with `tags: true` to limit selectin in Tag mode.

    <select class="form-control tagging" multiple="multiple">
        <option>orange</option>
        <option>white</option>
        <option>purple</option>
    </select>

    var ss = $(".basic").select2({
        tags: true,
    });