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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подключаем fancybox в Drupal 6

Сентябрь 1, 2013 г.

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать

Ajax в Drupal 7

Август 31, 2015 г.

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов. Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...

Читать

 

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



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