Связанные списки select с получением данных по ajax

В прошлый раз я показывал как можно «на лету» создавать списки html select, данные которых содержались в специальном javascript массиве.

Подготовить такой массива не самая приятная работа, да и место данным, я считаю, в базе данных. Потому логичным продолжением темы с динамически создаваемыми связанными select является пример работы с запросом данных по мере необходимости асинхронно с сервера по средством ajax.

База данных

Начнем с создания структуры данных.

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

Для этого я создал две таблички — tree и items.

Таблица tree будет содержать иерархию связанных пунктов для выпадающий списков.

tree-table

treeID — ключ, pID — указатель на родительский пункт, label — текстовая метка для выпадающего списка, а objID — указатель в таблицу items, для конечных элементов дерева.

В таблице items мы разместим описания видов вооружений.

items-table

Описание весьма условное. Кроме ключа в таблице есть title — название вооружения и какие то два параметра, которые мы вообще никак не характеризуем. :)

HTML код

Практически идентичен прошлому примеру.

Мы подключаем библиотеку jQuery и класс — TSEL, создающий связанные списки. TSEL работает с двумя HTML контейнерами, идентификаторы которых мы передадим при инициализации TSEL. Третьим параметром будет url к файлу сервера для обработки ajax запросов.

Javascript создающий списки

Файл tsel.js, подключаемый в секции head содержит класс-функцию объекта, который запрашивает данные на сервере и создаёт в нашем документе связанные выпадающие списки.

Давайте рассмотрим его, не вникая в подробности реализации.

Я не стал полностью приводить код, постарался описать его логику. Файлы примера, а также скрипт базы данных вы найдете в архиве в конце статьи.

Мы имеем дело всего с пятью функциями. Две из них грузят и показывают очередной уровень select-а, ещё две — делают тоже самое для карточки вооружений. А оставшаяся функция реализует логику : какую пару задействовать при выборе пункта списка.

PHP код, реализующий работу сервера

В PHP у нас производится отработка команд клиента, запросы к базе данных. Запросов всего два:

  • вернуть список опций ветки дерева, по указанному айди родителя (команда load-brunch),
  • вернуть данные об единице вооружения (команда load-object).

Надеюсь, загрузка данных пояснений не требует. :)

Результат

Как видите, я не использовал никакого оформления. Максимально сократил анализ ошибок и коллизий, связанных с асинхронностью запросов. Пример можно развивать и улучшать как того требует уже ваша задача.

Мне не хотелось создавать лишние таблицы в базе сайта. Потому я ограничусь комментариями к скринам.

Сразу после инициализации появится первый из выпадающих списков. Как видите, он состоит из названий видов вооружений.

first-level-select-dynamic

Выбирая варианты, вы будете открывать следующий уровень. Я выбрал guns (надо было назвать его cannons или artillery :)) и получил следующий набор вариантов — это уже конечные элементы в моем примере.

guns-select

Потому при выборе одного из пунктов загрузились данные объекта.

cannon-2c5

Если с пунктом не связан объект, а также не удалось найти дочерние элементы списка — выскочит alert с надписью — «Ветка пуста!».

Вложенность ничем не ограничена. Кроме того, ветки и листочки могут располагаться на одном уровне.

Архив файлов и скрипт базы данных.

Скачать без регистрации и СМС :)

Архив содержит 5 файлов:

files

Настройки подключения к вашей базе данных введите в файле db.php. Скрипт для создания таблиц и дамп данных — в test_base.sql. Остальные файлы вы уже знаете.

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

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

Jquery перебор элементов

Октябрь 18, 2015 г.

С помощью селектора jQuery мы выбрали какие то элементы. Как теперь организовать их перебор в цикле? Есть пара вариантов. Используем функцию $.each(func) Разработчики не могли не заложить перебор по найденным элементам в библиотеку. Параметром должна ...

Читать

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

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

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

Читать

 

Комментарии к «Связанные списки select с получением данных по ajax»

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



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