Иногда на форме обратной связи могут понадобиться сразу несколько элементов «select», значения в которых должны быть взаимосвязаны так, чтобы в зависимости от изменения пользователем одного поля, содержимое остальных полей так же изменялось (сброс или подгрузка другого набора значений). Примером могут служить категории и подкатегории.
В Chronoforms5 разработчики показали основной принцип создания таких полей в одной из демо-форм(demo-dynamic-dropdown) с подгрузкой значений из массива. На этой форме два поля «dropdown» для выбора команд в различных лигах. Второе поле не сбрасывается при сбросе первого. Попробуем сделать такой сброс и, заодно, немного усложним пример, добавив к форме третий элемент «dropdown».
Для начала определим категории и подкатегории. Можно продолжить с футбольными командами или создать новую форму и придумать свои категории и подкатегории.
У меня получились такие категории товаров.
- Для дома
- Пылесосы
- Вертикальные пылесосы
- Роботы-пылесосы
- Моющие пылесосы
- Климатическая техника
- Кондиционеры
- Вентиляторы
- Воздухоочистители
- Стиральные машины
- Автоматические
- Полуавтоматические
- Переносные стиральные машины
- Пылесосы
- Для кухни
- Крупногабаритная техника
- Холодильники
- Морозильные камеры
- Кухонные плиты
- Мелкая техника
- Мультиварки
- Блендеры и миксеры
- Мясорубки
- Встраиваемая техника
- Варочные панели
- Духовые шкафы
- Встраиваемые холодильники
- Крупногабаритная техника
- Для ремонта
- Электроинструменты
- Дрели
- Рубанки
- Фрезеры
- Ручные инструменты
- Отвертки, ключи
- Пилы, ножовки, лобзики
- Малярные инструменты
- Измерительные инструменты
- Рулетки и мерные ленты
- Лазерные уровни
- Лазерные дальномеры
- Электроинструменты
Три поля select (dropdown) с именами и идентификаторами:
- Отдел — dd1
- Секция — dd2
- Категория — dd3
Размещаем их на форме (вкладка «Дизайнер», подраздел «Макет») и настраиваем в каждом из них пока только вкладку «Основные настройки»-->"Опции".
Должно получиться, примерно, так:
- для dd1
- для dd2
- dd3 настраивается по аналогии с dd2
Остальные вкладки настроек этих полей в «дизайнере» пока не трогаем и переходим на вкладку настройки формы «Установка».
По условию, все наши три поля dd1, dd2 и dd3 взаимосвязаны и должны сбрасываться или изменяться в зависимости от действий пользователя.
Сделаем это так же, как на демо-форме, предложенной разработчиками, т. е. с помощью динамической подгрузки значений в поля из n-мерных массивов по событию. Каждому из 3-х полей будет соответствовать свое пользовательское событие и свой, прописанный в его коде, массив. Мерность массива будет зависеть от уровня вложенности категорий и подкатегорий созданного нами ранее списка.
Во вкладке настроек формы «Установка» нажатием кнопки «Добавить новое событие» создаем наши события с названиями load_dd1, load_dd2 и load_dd3. Затем размещаем в каждом по одному элементу «Custom code» из репозитория выбора обработчиков (меню «Основные»/«Basic» слева) и прописываем в их поля «Контент» получившиеся массивы, не забывая про теги. Метки для этих элементов прописывать не обязательно.
Код для load_dd1:
<?php
$dd1 = array ("" => "- Выберите раздел -",
"val1" => "Для дома",
"val2" => "Для кухни",
"val3" => "Для ремонта",);
echo json_encode($dd1);
?>
Код для load_dd2:
<?php $dd2 = array ( "" => array( "" => "- Выберите раздел -"), "val1" => array( "" => "- Выберите секцию -", "val11" => "Пылесосы", "val12" => "Климатическая техника", "val13" => "Стиральные машины", ), "val2" => array( "" => "- Выберите секцию -", "val11" => "Крупногабаритная техника", "val12" => "Мелкая техника", "val13" => "Встраиваемая техника", ), "val3" => array( "" => "- Выберите секцию -", "val11" => "Электроинструменты", "val12" => "Ручные инструменты", "val13" => "Измерительные инструменты", ), ); echo json_encode($dd2[$form->data["dd1"]]); ?>
Код для load_dd3:
<?php
$dd3 = array(
"" => array("" => array ("" => "- Выберите раздел -", ), ),
"val1" => array("" => array ("" => "- Выберите секцию -", ),
"val11" => array ("" => "- Выберите категорию -", "val111" => "Вертикальные пылесосы",
"val112" => "Роботы-пылесосы", "val113" => "Моющие пылесосы",),
"val12" => array ("" => "- Выберите категорию -", "val111" => "Кондиционеры",
"val112" => "Вентиляторы", "val113" => "Воздухоочистители",),
"val13" => array ("" => "- Выберите категорию -", "val111" => "Автоматические",
"val112" => "Полуавтоматические", "val113" => "Переносные стиральные машины"), ),
"val2" => array("" => array ("" => "- Выберите категорию -", ),
"val11" => array ("" => "- Выберите категорию -", "val111" => "Холодильники",
"val112" => "Морозильные камеры", "val113" => "Кухонные плиты",),
"val12" => array ("" => "- Выберите категорию -", "val111" => "Мультиварки",
"val112" => "Блендеры и миксеры", "val113" => "Мясорубки",),
"val13" => array ("" => "- Выберите категорию -", "val111" => "Варочные панели",
"val112" => "Духовые шкафы", "val113" => "Встраиваемые холодильники"), ),
"val3" => array("" => array ("" => "- Выберите категорию -", ),
"val11" => array ("" => "- Выберите категорию -", "val111" => "Дрели",
"val112" => "Рубанки", "val113" => "Фрезеры",),
"val12" => array ("" => "- Выберите категорию -", "val111" => "Отвертки, ключи",
"val112" => "Пилы, ножовки, лобзики", "val113" => "Малярные инструменты",),
"val13" => array ("" => "- Выберите категорию -", "val111" => "Рулетки и мерные ленты",
"val112" => "Лазерные уровни", "val113" => "Лазерные дальномеры"), ),
);
echo json_encode($dd3[$form->data["dd1"]][$form->data["dd2"]]);
?>
После того, как прописали код для всех пользовательских событий, снова переходим на вкладку настройки формы «Дизайнер» и подключаем эти события к соответствующим им полям (вкладки «Events» или «События»):
- для dd1
- для dd2
- во вкладке dd3 ничего указывать не нужно. Оставляем, как есть.
Во вкладках «Динамические данные» для всех трех элементов «Dropdown» в полях «Включено» должны быть значения «Нет», т. к. база данных для подгрузки переменных в поля не используется. Вкладки «Валидация» настраиваем в зависимости от того, обязательно данное поле или нет.
Теперь форму можно сохранить и проверить работу select-ов.