Как select'ы динамически заполнять option'ами?

Question

[ART4]

Есть массив:

let data = [
		{id: '1', label: 'ru', country: 'Россия', citys: [
			{id: '1-1', city: 'Москва'},
			{id: '1-2', city: 'Санк-Петербург'},
			{id: '1-3', city: 'Сочи'},
			{id: '1-4', city: 'Анапа'}
		]},
		{id: '2', label: 'by', country: 'Беларусь', citys: [
			{id: '2-1', city: 'Минск'},
			{id: '2-2', city: 'Гомель'},
			{id: '2-3', city: 'Витебск'}
		]},
		{id: '3', label: 'uk', country: 'Украина', citys: [
			{id: '3-1', city: 'Киев'},
			{id: '3-2', city: 'Львов'},
			{id: '3-3', city: 'Одеса'}
		]}
	];

	data.forEach(function(entry) {
	    console.log(entry);
	});

Он имеет Страны, в каждой стране имеются свои Города. Как вывести их в select, чтобы можно было выбрать страну, а потом город который относится к ней?

Answer 1

[0xD34F]

<select id="country"></select>
<select id="city"></select>

const countryEl = document.querySelector('#country');
const cityEl = document.querySelector('#city');

countryEl.innerHTML = data.map(n => `<option value="${n.id}">${n.country}</option>`).join('');

countryEl.addEventListener('change', function() {
  cityEl.innerHTML = data
    .find(n => n.id === this.value)
    .cities
    .map(n => `<option value="${n.id}">${n.city}</option>`)
    .join('');
});

countryEl.dispatchEvent(new Event('change'));

Comments

[ART4]

Спасибо большое за оперативный ответ. Города не вылазят...

[0xD34F]

ART4, какая оценка по английскому в школе была?

[ART4]

0xD34F, из 10 получил за глаза 5

[0xD34F]

ART4, а должно было быть 1. Множественное число для слова city - не citys, а cities. Исправляйте свои данные.

[ART4]

0xD34F, Вы правы, ну бывает такое косячки... Но всё равно вам огромное спасибо. Сижу просто изучаю по тиху js, подскажите может книг каких почитать?

Answer 2

[Qwes]

А как решается проблема с многовложенным списком например в 4 ступени (страна - город - район - дом), что то ну очень много получается если так... может есть какой способ быстрее?