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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Улучшаем реакцию меню

Апрель 28, 2016 г.

Pull-down - выпадающим меню, работающим на javascript, никого не удивить. Мне не нравится, что оно закрывается мгновенно, как курсор мыши выходит за край выпавшей секции. Немного промахнешься (особенно это часто случается с последними пунктами), и меню ...

Читать

Как убрать фокус, используя jQuery?

Сентябрь 22, 2016 г.

Не так принципиально, какой библиотекой мы воспользуемся, когда будем убирать фокус, я привык использовать jQuery. Потому речь пойдет в контексте этой библиотеки. Сложностей с тем как снять фокус с элемента традиционно больше, чем с тем, как его ...

Читать

 

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

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



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

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

  1. Олег:

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