How to display exact value from drop down?

Question

I have configured my select via select2 and things works quite well.

I have used templateResult with formatState approach to add the icon to my dropdown options.

$(".js-country-list").select2({
  templateResult: formatState
});

that however does not change anything to selected value (see image below).

How can I make sure that selected value (in my case EUR) would be displayed exactly same as option: Euro (EUR)?

Thanks.

user_1620449 · Answer

The templateSelection method described at https://select2.org/selections can be used to achieve this, it can be passed the same function used by templateResult.

$(".js-country-list").select2({
  templateResult: formatState,
  templateSelection: formatState
});

Example listing countries and their flags (not currencies) is incorporated below.

// Template function which adds CSS flag and displays country name
function flagTemplate(country){
  return $("" + country.text + "");
}

// Generate correct URL based on entered search term
function generateUrl(params){
  if(params.term){
    return "https://restcountries.com/v3.1/name/" + params.term;
  } else {
    return "https://restcountries.com/v3.1/all";
  }
}

// Initialise select2 using flagTemplate function for both result and selection
$('#countrySelect').select2({
  // Set template for results and selection
  templateResult: flagTemplate,
  templateSelection: flagTemplate,
  // Set placeholder text
  placeholder: 'Select country...',
  // Load country list from https://restcountries.com
  ajax: {
    url: generateUrl,
    cache: 250,
    dataType: "json",
    processResults: function(data) {      
      return {
        results: data
          .map(x => ({id: x.cca2.toLowerCase(), text: x.name.common}))
          .sort((a, b) => ('' + a.text).localeCompare(b.text))
      };
    }
  }
});

#countrySelect {
  width: 300px;
}

.flag-text {
  margin-left: 10px;
}

How to display exact value from drop down?

1 Answers