<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>

<select id="countrySelect"></select>
<input id="phone" type="tel">

<script>
  var input = document.querySelector("#phone");
  var iti = window.intlTelInput(input, {
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
    allowDropdown: false,
    initialCountry: 'ae' ,
    showSelectedDialCode: true,
  });
  iti.promise.then(function() {
    input.dispatchEvent(new Event("countrychange"));
  })

  // Заполнение select списка странами из intl-tel-input
  var countryData = window.intlTelInputGlobals.getCountryData();
  var countrySelect = document.querySelector("#countrySelect");
  for (var i = 0; i < countryData.length; i++) {
    var country = countryData[i];
    var optionNode = document.createElement("option");
    optionNode.value = country.iso2;
    optionNode.textContent = country.name + " (+" + country.dialCode + ")";
    countrySelect.appendChild(optionNode);
  }

  // Синхронизация выбора страны с intl-tel-input
  countrySelect.addEventListener("change", function() {
    iti.setCountry(this.value);
  });

  // Опционально: Обновление select при изменении страны через ввод номера
  input.addEventListener("countrychange", function() {
    var currentCountry = iti.getSelectedCountryData();
    countrySelect.value = currentCountry.iso2;
    input.value = iti.getSelectedCountryData().dialCode;
  });
</script>

.iti__flag-container {
  display: none;
}