Формирование связанных списков select произвольной вложенности

Не ослабевает интерес к вопросу о динамическом создании связанных выпадающих HTML списков. Для двух зависимых списков (я публиковал пример более 5 лет назад!) ситуация простая и понятная, но люди задают вопрос — а как развить пример для вложения 3х списков?

Ответ — никак. :) Придется менять практически все, потому слово — менять тут не подходит. Я решил написать универсальный пример, который будет работать с любой вложенностью списков.

Так как вложенность у нас не ограничена, то в произвольном случае мы имеем не многомерную таблицу — а дерево вариантов. Т.е. где то мы углубимся на три уровня, а где — то только на один.

Входной массив данных потребуется сильно изменить. Теперь это не плоский массив, многоуровневая матрешка из объектов и массивов. Структура матрешки весьма условна, может быть изменена, но для примера нужно было сформулировать то, как мы описываем данные. Иначе как написать программу?

Описание задачи

Мы имеем дело с гипотетическим прайсом на услуги заправки картриджей, где сначала надо выбрать марку принтера, потом модель принтера, далее — срочность заправки; и тогда вы получите справку о стоимости услуг. Но в некоторых случаях может оказаться, что модель принтера или срочность оказания услуг — не важны, то есть мы сразу должны показать цены.

Структура данных

Начнем с описания структуры данных. Самый нижний уровень матрешки описывает первый уровень, первый из выпадающих списков.

Это заголовок и массив опций-объектов.

Опций могут быть двух типов по тому, как они ведут себя при их выборе:

  • показывается следующий уровень выпадающего списка (добавляется еще один html select),
  • показывается информация о ценах.

Для первого случая мы должны задавать объект в списке options в виде:

Описание следующего уровня устроено точно также как и предыдущий уровень.

Второй случай — это конечный «листок» на дереве прайса. Все поля очень условны. К примеру, без поля data — вообще можно обойтись. Но мы же делаем какую то универсальную процедуру :), потому я предусмотрел задание произвольного набора данных для конечного пункта выбора.

Верстка (требования к макету)

Скрипт выполнен в виде js-класса. Он работает с двумя HTML контейнерами (у меня это — DIV), ID которых нужно указать при инициализации. Ещё на вход нужно передать данные в виде описанной выше структуры прайса.

Кроме того, класс использует библиотеку jQuery. Если у вас она не подключена, то добавьте  следующий html код (до инициализации TSEL):

Версия библиотеки особого значения не имеет.

Полный код скрипта можно взять тут. Скачайте его методом — сохранить как — это файл с расширением html.

Действующий пример динамических селектов произвольной вложенности

Поиграйте с прайсом, чтобы понять как он работает. Наверное, самое сложное теперь -подготовить данные прайса :).

Логическим продолжением темы является реализация с использованием запроса данных по ajax.

Написать комментарий

Мало букафф? Читайте есчо !

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

Ищем видимые элементы, используя jQuery

Апрель 22, 2016 г.

В CSS такого селектора нет, в вот jQuery предоставляет. Впрочем, нужно понимать, какие объекты jQuery считает видимыми, а какие наоборот -невидимыми. К примеру, видимым будет считаться и объект с visiblity: hidden и объект с opacity: 0. Они хоть ...

Читать

 

Комментарии к «Формирование связанных списков select произвольной вложенности»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Формирование связанных списков select произвольной вложенности”

  1. Олег:

    Здравствуйте! А как в скрипте ограничить выпадающий список?