Автоматично попълване на списъчно поле с имена на държави с помощта на jquery и събитие за щракване на полето

Моят формуляр има списъчно поле, което пита за държавата на потребителя, но искам само да попълня списъчното поле чрез AJAX извикване, ако полето все още не показва държавата на потребителя. Първоначално списъчното поле съдържа само една държава - държавата, върната от търсене на ip към държава на сървъра.

Изглежда, че действието по подразбиране на списъчното поле се случва преди моето действие за събитие. Бих искал моето действие да се извърши първо, така че когато потребителят щракне върху списъчното поле, полето да бъде предварително попълнено с държавите, изтеглени от сървъра, преди полето да се отвори.

Благодаря за всякакви предложения.

$().ready(function() {
  $('select#selCountry').one('click', function() {
    var selCountry = $('select#selCountry');
    var selected = $(selCountry).val();
    selCountry.html('<option value="">Loading...</option>');
    $.getJSON('/AjaxHelpers/CountryList', function(data) {
      if (data.length) {
        var options = '';
        for (var i = 0; i < data.length; i++) {
          var key = data[i].Key;
          var val = data[i].Value;
          options += '<option value="' + key + '"';
          if (key == selected) {
            options += ' selected="selected"';
          }
          options += '>' + val + '</option>';
        }
        selCountry.html(options);
      }
      else {
        selCountry.html('<option value="">Failed.</option>');
      }
    });
  });
});

HTML:

<div>
  <select id="selCountry" name="CountryCode"><option value="GB">United Kingdom</option>