# Выбор страны и города через 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

←→
↑