Form - Select2

One stop solution for perfect admin dashboard!

Single Select Box

<form action="">
    <div class="form-group">
        <label for="js-states">Select State</label>
        <select class="js-states form-control" id="js-states">
            <option value="AK">Alaska</option>
              ...
            <option value="WV">West Virginia</option>
          </optgroup>
        </select>
    </div>
</form>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        $(".js-states").select2();
    });
</script>
                                                    
Multiple Select Box

<form action="">
    <div class="form-group">
        <label for="js-states-mul">Select Multiple States</label>
        <select class="js-states form-control" id="js-states-mul" multiple="multiple">
            <option value="AK">Alaska</option>
            ...
            <option value="WV">West Virginia</option>
          </optgroup>
        </select>
    </div>
</form>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        $(".js-states").select2();
    });
</script>
                                                    
Limiting number of selections

<form action="">
    <div class="form-group">
        <label for="js-states">Select State</label>
        <select class="js-states-limit form-control" id="js-states" multiple="multiple">
            <option value="AK">Alaska</option>
              ...
            <option value="WV">West Virginia</option>
          </optgroup>
        </select>
    </div>
</form>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        $(".js-states-limit").select2({
            maximumSelectionLength: 2
        });
    });
</script>
                                                    
Hide Search Box

<form action="">
    <div class="form-group">
        <label for="js-states-mul">Select State</label>
        <select class="js-states-hide form-control" id="js-states-mul" >
            <option value="AK">Alaska</option>
            ...
            <option value="WV">West Virginia</option>
          </optgroup>
        </select>
    </div>
</form>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        $(".js-states-hide").select2({
            minimumResultsForSearch: Infinity
        });
    });
</script>