Как сделать кастомный выпадающий список?

Question

[KatiaBeing]

Подскажите пожалуйста, как правильно сделать кастомный список стран используя API.
Вот fetch код:

const countryList = document.querySelector('.form-list.country');

fetch('https://restcountries.com/v3.1/all').then(res => {
  return res.json();
}).then(data => {
  let output = '';
  data.forEach(country => {
    output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`;
    countryList.innerHTML = output;
  });
}).catch(err => {
  console.log(err);
});

Полный код. Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами.

Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка.

Answer 1

[0xD34F]

Вместо назначения индивидуальных обработчиков клика элементам списка (которых в момент назначения ещё нет, openItems оказывается пуст, так что обработчики никому не назначаются) сделайте один делегированный, надо

openItems.forEach(function (formItem) {
  formItem.addEventListener('click', function () {
    openBtn.innerText = this.innerText;
    openList.classList.remove('open');
    hiddenInput.value = this.dataset.value;
  });
});

заменить на

openList.addEventListener('click', function(e) {
  const item = e.target.closest('li.form-item');
  if (item) {
    openBtn.innerText = item.innerText;
    openList.classList.remove('open');
    hiddenInput.value = item.dataset.value;
  }
});

Comments

[KatiaBeing]

Ух, заработало! Спасибо вам, добрый человек. В мою копилку знаний прибыло!