Создаем последовательный выбор на AJAXПорой на некоторых сайта можно встретить последовательный выбор для некоторой информации, зачастую этот выбор достаточно прост, в данном уроке мы рассмотрим как можно скрасить данный элемент сайта с помощью некоторых весьма интересных приемов. Выбор категорий будет приводить к обновлению страницы, показывая пользователю дополнительные элементы для уточнения. Опции выбора описаны с помощью PHP, поэтому будет просто переделать пример на использование базы данных. Данный элемент выбора будет отлично выглядеть на сайте..

Демонстрационная страница не использует элемент браузера. Потому что мы подключаем плагин jQuery Chosen для преобразования нашего элемента в стильный виджет, который вы видите на экране. Нужно просто вызвать метод chosen()  для элемента select, а все остальное сделает плагин. И так, начнем с разметки, следует заметить, что элемент выбора имеет заголовок, который описывает выбираемый параметр. Заголовок и элемент выбора заключены в элемент LI:

Следует заметить, что при добавлении вопросов дополнительные элементы LI создается кодом jQuery. Все они располагаются в неупорядоченном списке #questions. Заголовок и опции данных пунктов обрабатываются как JSON, что будет видно в части PHP.

Создаем последовательный выбор на AJAX

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

Как можно заметить в данном коде используется две функции JavaScript:

  • refreshSelects запускает плагин Chosen и привязывает обработчики событий каждый раз, когда новый пункт добавляется на страницу;
  • fetchSelect запрашивает фид JSON с сервера и генерирует разметку для ответа.

Теперь осталось сделать генерацию фида JSON. Обратите внимание, что функция fetchSelect получает в качестве аргумента строку. Это ключ, который передается в код PHP, обозначающий, какой набор пунктов нам требуется.

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

Создаем последовательный выбор на AJAX

В базе данных для решения задачи может использоваться набор строк. Но в нашем примере мы храним данные в статических объектах. Для решения мы определяем простой класс, который будет содержать информацию об элементе выбора.

ajax.php

Далее нам нужно только создать экземпляр данного класса для каждого элемента выбора и вызвать метод addItem() для добавления опций. Данный  метод имеет опциональный параметр $connection, который содержит имя зависимого элемента выбора.

ajax.php

Выше мы рассмотрели код  который определяет несколько элементов выбора и размещает их в массиве $selects. Когда скрипт получает запрос AJAX, он просматривает данный массив и возвращает ответ:

ajax.php

Когда мы вызываем метод toJSON() мы выводим все данные для элементов выбора в формате JSON, который используется клиентской частью jQuery. Вот и все, код достаточно большой, но не такой тяжелый как кажется на первый взгляд. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.