<select name="" id="">
<option value="" selected>Choose One</option>
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
</select>
<select class="form-select" name="" id="">
<option value="" selected>Choose One</option>
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
</select>
<!-- SUCCESS -->
<select class="form-select is-valid" name="" id="">...</select>
<!-- SUCCESS WITH MESSAGE -->
<select class="form-select is-valid" name="" id="">...</select>
<div class="valid-feedback">Text</div>
<!-- ERROR WITH MESSAGE -->
<select class="form-select is-invalid" name="" id="" required>...</select>
<div class="invalid-feedback">Text</div>
Read more about this plugin on Select2's website.
<select class="js-example-basic-single w-100" name="" id="selectID" data-placeholder="Choose One">
<option value="" selected>Choose One</option>
<option value="">...</option>
<option value="">...</option>
<option value="">...</option>
</select>
<!-- JAVASCRIPT ---------->
<script type="text/javascript" src="/scripts/common/js/select2-4.0.13/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// WHEN USED ON A PAGE
$('#selectID').select2();
// WHEN USED INSIDE OF A MODAL
$('#selectID').select2({
dropdownParent: $("#modalID")
});
});
</script>