Single select placeholders
<select class="js-example-placeholder-single js-states form-control">
<option></option>
</select>
$(".js-example-placeholder-single").select2({
placeholder: "Select a state",
allowClear: true
});
Multi-select placeholders
<select class="js-example-placeholder-multiple js-states form-control" multiple="multiple"></select>
$(".js-example-placeholder-multiple").select2({
placeholder: "Select a state"
});
Using placeholders with AJAX
Select2 supports placeholders for all configurations, including AJAX. You will still need to add in the empty <option>
if you are using a single select.
When using Select2 in single-selection mode, the placeholder option will be passed through the templateSelection
callback if specified. You can use some additional logic in this callback to check the id
property and apply an alternative transformation to your placeholder option:
$('select').select2({
templateSelection: function (data) {
if (data.id === '') { // adjust for custom placeholder values
return 'Custom styled placeholder text';
}
return data.text;
}
});
Latest posts by Amardeep Dubey (see all)
- Remove Duplicate Records from MySQL Server - October 12, 2021
- How to Secure Your Apache Server - September 10, 2021
- Linux security - September 9, 2021