Есть 2 селектора со странами и городами, как добавить третий в котором будут районы, что бы при выборе города, появлялся третий select с выбором районов?
<select id="countries-select"></select>
<select id="cities-select"></select>
<script>
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]));
}
}