Зависимые списки

Зависимые списки — часто используемое решение для улучшения пользовательского интерфейса. Пользователю не нужно вводить/рассматривать огромную массу информации. Достаточно выбрать нужны элемент списка в первом списке, а через JavaScript построить второй список, зависимый от первого. Это могут быть сочетания Автокомпания — Марка машины, название языка программирования — курсы по этому языку программирования.

Зависимые списки: создание

Готовый пример зависимых списков.

HTML-код списков:

<select name="country" id="country">
  <option value="bra" selected>Бразилия</option>
  <option value="rus">Россия</option>
  <option value="ind">Индия</option>
  <option value="chn">Китай</option>
  <option value="zaf">ЮАР</option>
</select>
<select name="city" id="city">
</select>

CSS-код списков:

* {
  font-size: 20px;
  padding: 2px;
}

При помощи JavaScript создаем пункты второго списка:

var cities = {
  bra: ["Сан-Паулу", "Рио-де-Жанейро"],
  rus: ["Москва", "Санкт-Петербург"],
  ind: ["Мумбаи", "Дели"],
  chn: ["Шанхай", "Пекин"],
  zaf: ["Йоханнесбург", "Кейптаун"]  
};
var country = document.getElementById("country");
var city = document.querySelector("#city");
window.onload = selectCountry;
country.onchange = selectCountry;

function selectCountry(ev){
  city.innerHTML = "";
  var c = this.value || "bra", o;
  for(let i = 0; i < cities[c].length; i++){
    o = new Option(cities[c][i],i,false,false);
    city.add(o);
  };
}

Решение с пунктами списка, зависящими от другого — отличный вариант для многих задач на сайте. Но если списки большие, то будет иметь смысл организовать получение значение для пунктов (options) второго списка через AJAX с сервера.