Append data attribute data-init-plugin="select2" to initialize any <select> automatically with basic options. Avoid auto-initializing when you want to have advance options
<form role="form">
<div class="form-group">
<!-- Using data-init-plugin='select2' automatically initializes a basic Select2 -->
<select class="full-width" data-init-plugin="select2">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>
<div class="form-group">
<!-- Element intended to use with advance options -->
<input type="hidden" id="mySelect2" class="full-width">
</div>
</form>
Step four
Apply the plugin to your desired element
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
<script>
$(document).ready(function() {
// Avoid applying plugin to <select> with data-init-plugin="select2"
// Only apply on elements that don't have data-init-plugin="select2"
$("#mySelect2").select2({
placeholder: "Select a type",
data: [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}]
});
});
</script>
jQuery validation and select2 is not directly compatible. Use the following code to fix it
