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

Leave a Comment

Your email address will not be published. Required fields are marked *

We care about your privacy and data security. Google serves cookies to analyse traffic and show ads on this site. By using this site you agree to these cookies being set. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close