select2: Display Chosen Value Instead of Option’s Text

Normally when you choose a value of a select2 box, an option’s text is displayed on the dropdown box. This post will show you how to display chosen value instead of the option’s text.

I often work with currency. Instead of displaying United States Dollar, I prefer to display only USD.

<select class="select2">
<option value="USD">USD – United States Dollar</option>
<option value="AUD">AUD – Australian Dollar</option>
<option value="JOD">JOD – Jordanian Dinar</option>
<option value="KRW">KRW – South Korean Won</option>
<option value="JPY">JPY – Japanese Yen</option>
</select>

$(‘.select2’).select2({
templateSelection: currencyTemplateSelection,
});

function currencyTemplateSelection(val) {
return val.id;
}