JSFiddle - React, Tailwind, and code Playground

HTML

<select id='mySelect'></select>

CSS

#mySelect {
   width: 100px;
}

JavaScript

var sel = document.getElementById('mySelect');

sel.addEventListener('click', loadOptions);
sel.addEventListener('click', clicked);

var options = ['Tokyo', 'Moscow', 'New York', 'Rome', 'London', 'Kyiv', 'Ottava'];

function loadOptions(e) {
  if(e.target.tagName !== 'SELECT')
    return;
  
  // добавить данные
  for(var i = 0; i < options.length; i++) {
   		addOption(options[i], i);
  }
  
  // убрать обработчик
  sel.removeEventListener('click', loadOptions);
    
  function addOption(text, delay) {
    // симулировать асинхронную загрузку
    setTimeout(function () {
         var o = document.createElement('option');
   		 o.innerHTML = text;
  		 sel.appendChild(o);
      
        if(expanded) {
          var newSize = sel.childNodes.length;
          sel.setAttribute('size', newSize);
        }
    }, 500*delay);
  }
}

// этот обработчик нужен дабы нормально закрывать/открывать во время загрузки данных
var tempSize = 1;
var expanded = false;
function clicked(e) {
    tempSize = tempSize == 1 ? sel.childNodes.length : 1;
    sel.setAttribute('size', tempSize);
    
    expanded = !expanded;
}