Дуже часто стикаюся з питаннями реалізації пов'язаних динамічних випадаючих списків (select), дуже багато методів, всіляких, навіть JSON в деяких використовується, що на мій скромний погляд тільки дублює дані з бази і створює банальну надмірність.
Одного разу познайомився з $ .ajax (JQuery), який може передавати дані методами GET або POST і зрозумів, що пов'язані списки, це простіше простого.
Потрібно відзначити, що є методи, в яких можна генерувати динамічні списки необмежену количесво раз і всі вони будуть пов'язані. У даній статті наводяться за все три списки, що, по-моєму, досить для розуміння методу як такого і створення на його основі поліпшених алгоритмів реалізації завдання.
Постановка завдання: зв'язати три (країна, область, місто) випадають списку використовуючи $ .ajax (JQuery) без перезавантаження сторінки, причому дані беруться з бази mySQL.
Для початку створимо пов'язані таблиці в базі:
Напишемо наступний html код:
Зверніть увагу на 2 порожніх діва «selectDataRegion» і «selectDataCity», в них ми будемо вставляти згенеровані випадають списки. Селект з країнами згенерований за допомогою запиту в базу з сортуванням по полю назви країни. Впринципі, якщо перший список у Вас статичний і дані незмінні, то можна просто написати дані в html і не використовувати першу таблицю бази, але тоді прийдеться більш уважно ставиться до зв'язці країни і value select відповідно.
КОРИСНО Перенесення слів з Hyphenator.js
Зверніть увагу, що в обох функціях ми звертаємося до одного і того ж файлу. Краса пересилання даних методом POST дозволяє створити перемикач switch по змінної action і правильно ним скористатися.
Створимо файл виконання /action/ajax.base.php:
Залишилося тепер протестувати. Виберіть «Україна» -> «Донецька обл.» -> «Місто» і буде Вам щастя! В якості домашнього завдання можна реалізувати так: не приховувати списки областей і міст, а замість порожніх Дивов показувати ті ж списки, що випадають, тільки прописати в них один нульовий параметр з тескстом вибору даних в ранньому СЕЛЕКТА або маніпулювати параметром «disabled».
КОРИСНО Пошук і заміна параметра на засланні