Email: eblinkoff@mail.ru
Телеграм: +79312009928
WhatsApp: +79312009928
Спросить
Заказать
Акция!
Россия, Санкт-Петербург +79312009928

Динамические связанные ajax списки без перезагрузки страницы.


Имеется.

Есть три выпадающих списка - "Марка", "Модель" и "Год выпуска". Они формируются штатными средствами Диафан, используя существующие товары в каталоге. Если выбрать марку автомобиля, например "Форд", то выпадающие списоки "Модель" и "Год выпуска" остаются неизменными.

Задача.

Требуется сделать их связанными - то есть при выборе, например, марки "Форд" в списке "Модель" должны отобразиться модели только марки "Форд" и никакие другие в списке "Год выпуска" - только года выпуска данной марки и модели. Разумеется нужно сделать это без перезагрузки страницы - в 2017 году это совершенно очевидно.

Решение.

Классическая задача со связанными списками, мне приходилось делать такие и раньше и даже более сложные. Особенностью программирования выпадающих списков является запарность этого дела. По сути - ничего сложного, однако попотеть придётся. Основной вопрос - как всё сделать, как приложение "узнает" какие значения и когда выдавать? Клиент предоставил таблицу соответствий вида "Марка"-"Модель"-"Год", которая и была использована.

Как это всё работает?

При изменении значения одного из select списков срабатывает событие change селекта и на сервер отправляется запрос с информацией: какой из трёх списков был изменён и само выбранное значение. Сервер принимает данные и формирует новые списки с учётом выбранного значения. Например, если в поле "Марка" выбрано значение "Форд", то сервер содаёт для поля "Модель" список моделей, вроде, "Эксплорер","Куга","Фокус" и так далее. Так же и с годами выпуска. Затем данные отправляются обратно на клиент и там новые списки вставляются взамен старых. Ситуацию осложнило наличие jquery плагина кастомизации выпадающих списков. Серверная сторона была давно написана, а клиентская из-за этого сильно задержалась. Ничего не получалось пока я полностью не разобрался как работает плагин.




<--Предыдущая статья | Следующая статья-->
RSSкомментариев

Введите Ваш комментарий

^
наверх