Cannot show option selected with templateResult select2

Question

function formatCountry(country) {

    if (!country.id) {
        return country.text;
    }
    var $country = $(
        '<span class="flag-icon flag-icon-' + country.id.toLowerCase() + ' flag-icon-squared"></span>' +
        '<span class="flag-text">' + country.text + "</span>"
    );
    return $country;
};

$("[name='country']").select2({

    templateResult: formatCountry,
    data: isoCountries
});

I use this code for country select, but when I refresh page, option selected return dafault value.

Answer 1

You can use local storage like this.

$("[name='country']").select2({
  placeholder: "Select a country",
  templateResult: formatCountry,
  data: isoCountries
});
var OldValue = localStorage.getItem("Key");
if (OldValue !== "" && OldValue !== null) {
  $('select').select2({
    placeholder: "Select a country",
    templateResult: formatCountry,
    data: isoCountries
  }).select2('val', OldValue);
}
$("[name='country']").on("change", function() {
  var selected = $(this).val();
  localStorage.setItem("Key", selected);
});

Working Fiddle

Run fiddle multi-pal time and you can see the result.