Передать .text() в другое поле в раскрывающемся списке

Очень нужна помощь в вопросе. Имеется раскрывающийся список. То есть своего рода кнопка допустим с названием "Все страны" и по нажатию открывается список стран. При выборе страны и клике, "Все страны" заменяется на название выбранной. Это реализовать получилось, но с таким кодом

        <div class="dropdown" id="city-dropdown">
            <div class="filter-country select">
                <span>Все страны</span>
            </div>
            <ul class="dropdown-menu">
                <li>Все страны</li>
                <li>Россия</li>
                <li>США</li>
                <li>Великобритания</li>
                <li>Саудовская Аравия</li>
            </ul>
        </div>

Когда подключаю Json и за место .dropdown-menu статичного списка, падает от него уже массив, сам список появился и работает, но не работает уже li.text() и значение не подтягивается. Может .text не применим к json? И эти данные как то по другому достаются? Хотя в html структура верная.

Скрипт

$.getJSON('./api/allCountries', function(data){
    var items = [];
  
    $.each(data, function(key, val){
      items.push('<li id="' + val.id + '">' + val.name + '</li>');
    });
  
    $('<ul/>', {
      'class': 'dropdown-menu',
      html: items.join('')
    }).appendTo('.dropdown');
  });
  // Dropdown Menu
  $('.dropdown').click(function () {
    $(this).attr('tabindex', 1).focus();
    $(this).toggleClass('active');
    $(this).find('.dropdown-menu').slideToggle(300);
  });
  $('.dropdown').focusout(function () {
    $(this).removeClass('active');
    $(this).find('.dropdown-menu').slideUp(300);
  });
  $('.dropdown .dropdown-menu li').click(function () {
    $(this).parents('.dropdown').find('span').text($(this).text());
  })