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>