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