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 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;
}