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>