Выбор страны и города через select на JavaScript

Рассмотрим задачу на практическое применение выпадающих списков select. Пусть у нас есть селект со странами и селект с городами. Давайте сделаем так, чтобы при выборе определенный страны во втором селекте появлялись города этой страны. Найдем самое универсальное решение!

Исходники кода

.cities {
	display: none;
}
.active.cities {
	display: inline-block;
}

<select id="countries">
	<option value="ru">Россия</option>
	<option value="by">Беларусь</option>
	<option value="ua">Украина</option>
</select>

<select id="ru" class="cities active">
	<option>Москва</option>
	<option>Питер</option>
	<option>Воронеж</option>
</select>
<select id="by" class="cities">
	<option>Минск</option>
	<option>Витебск</option>
	<option>Орша</option>
</select>
<select id="ua" class="cities">
	<option>Киев</option>
	<option>Львов</option>
	<option>Одесса</option>
</select>

var countries = document.querySelector('#countries');

var ruCities = document.querySelector('#ru');
var byCities = document.querySelector('#by');
var uaCities = document.querySelector('#ua');

countries.addEventListener('change', function() {
	document.querySelector('.active.cities').classList.remove('active');
		
	if(this.value == 'ru') {
		ruCities.classList.add('active');
	}
	if(this.value == 'by') {
		byCities.classList.add('active');
	}
	if(this.value == 'ua') {
		uaCities.classList.add('active');
	}
});

<select id="countries-select"></select>
<select id="cities-select"></select>

var countriesSelect = document.querySelector('#countries-select');
var citiesSelect = document.querySelector('#cities-select');

var data = {
	Россия: ['Москва', 'Питер', 'Воронеж'],
	Беларусь: ['Минск', 'Витебск', 'Орша'],
	Украина: ['Киев', 'Львов', 'Одесса'],
}

var countries = Object.keys(data);

for (var i = 0; i < countries.length; i++) {
	countriesSelect.add(new Option(countries[i]));
}

var defaultCities = data[countries[0]];
for (var i = 0; i < defaultCities.length; i++) {
	citiesSelect.add(new Option(defaultCities[i]));
}

countriesSelect.addEventListener('change', function() {
	var cities = data[this.value];
	citiesSelect.length = 0;
	
	for (var i = 0; i < cities.length; i++) {
		citiesSelect.add(new Option(cities[i]));
	}
});

<select id="countries-select"></select>
<select id="cities-select"></select>

var countriesSelect = document.querySelector('#countries-select');
var citiesSelect = document.querySelector('#cities-select');

var data = {
	Россия: ['Москва', 'Питер', 'Воронеж'],
	Беларусь: ['Минск', 'Витебск', 'Орша'],
	Украина: ['Киев', 'Львов', 'Одесса'],
}

var countries = Object.keys(data);
addOptions(countriesSelect, countries);

var defaultCities = data[countries[0]];
addOptions(citiesSelect, defaultCities);

countriesSelect.addEventListener('change', function() {
	var cities = data[this.value];
	citiesSelect.length = 0;
	
	addOptions(citiesSelect, cities);
});

function addOptions(select, arr) {
	for (var i = 0; i < arr.length; i++) {
		select.add(new Option(arr[i]));
	}
}

Смотрите также

видео
теория по работе с select на JavaScript