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