Как добавить третий зависимый select

147

21 октября 2019, 05:40

Есть 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]));
        }
    }

Answer 1

var countriesSelect = document.querySelector('#countries-select'); 
var citiesSelect = document.querySelector('#cities-select'); 
var districtsSelect = document.querySelector('#districts-select'); 
 
var data = { 
  Россия: { 
    Москва:  ["District R-M-1", "District R-M-2"], 
    Питер:   ["District R-P-1", "District R-P-2"], 
    Воронеж: ["District R-V-1", "District R-V-2"] 
  }, 
  Беларусь: { 
    Минск:   ["District B-M-1", "District B-M-2"], 
    Витебск: ["District B-V-1", "District B-V-2"], 
    Орша:    ["District B-O-1", "District B-O-2"] 
  }, 
  Украина: { 
    Киев:   ["District U-K-1", "District U-K-2"], 
    Львов:  ["District U-L-1", "District U-L-2"], 
    Одесса: ["District U-O-1", "District U-O-2"] 
  } 
}; 
 
function addOptions(select, arr) { 
  select.innerHTML = ""; 
  for (var i = 0; i < arr.length; i++) { 
    select.add(new Option(arr[i])); 
  } 
} 
 
function countriesChanged() { 
  addOptions(citiesSelect, Object.keys(data[countriesSelect.value])); 
  citiesChanged(); 
} 
countriesSelect.addEventListener('change', countriesChanged); 
 
function citiesChanged() { 
  addOptions(districtsSelect, data[countriesSelect.value][citiesSelect.value]); 
} 
citiesSelect.addEventListener('change', citiesChanged); 
 
addOptions(countriesSelect, Object.keys(data)); 
countriesChanged(); 
citiesChanged();

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не подключается WebSocket

Я пытаюсь из js файла подключиться к вебсокету на asp

118

javascript

Динамические списки JavaScript

Нужна система выпадающих списков, чтоб каждый появлялся только при выборе в предыдущем спискеТо есть, имеем Список 1

109

javascript

Можно ли скачать для своего сайта контрол гугл календаря “Повтор мероприятия”

Т е есть ли что то похожее, чтобы можно было встроить в свой код (php, js/jquery) наподобие как встраивается контрол datepicker?

130

javascript

Получение разницы во времени формата hhmm

Есть две переменные хранящие времяОдна текущее вторая "требуемое"

113