Динамические выпадающие списки

В этом примере рассмотрим, как связать нескольких выпадающих списков (html-элементов select), чтобы значения (option) каждого следующего зависели от выбранной опции в предыдущем. Для примера потребуется html-разметка, допустим, с тремя выпадающими списками и немного javascript.

Особенность разметки в том, что названия css-классов для option в каждом следующем select должны соответствовать выбираемым значениям в предыдущем выпадающем списке. На самом деле, вовсе не обязательно использовать названия классов, html5 позволяет придумывать и использовать любые атрибуты. В случае с css-классами, опции списка можно раскрасить и, даже если js не сработает, по цвету будет видна связь опций.

В javascript будет 2 метода. В одном инициализируем связь между двумя выпадающими списками, достанем предустановленный набор опций из зависимого select и будем отслеживать изменение значения в исходном. Другой – после смены значения в исходном select будет перезаписывать набор опций в зависимом списке только теми option, у которых в именах css-классов есть соответствующий выбранной опции исходного списка. После установки опций вызываем событие onchange для зависимого выпадающего списка, чтобы следующий, который от него зависит, тоже отреагировал на изменившееся состояние.

Пример взаимодействия нескольких выпадающих списков:

See this code dynamic select on x.xhtml.ru.