Пов'язані динамічні списки select без перезавантаження сторінки

Пов'язані динамічні списки select без перезавантаження сторінки
Дуже часто стикаюся з питаннями реалізації пов'язаних динамічних випадаючих списків (select), дуже багато методів, всіляких, навіть JSON в деяких використовується, що на мій скромний погляд тільки дублює дані з бази і створює банальну надмірність.

Одного разу познайомився з $ .ajax (JQuery), який може передавати дані методами GET або POST і зрозумів, що пов'язані списки, це простіше простого.

Потрібно відзначити, що є методи, в яких можна генерувати динамічні списки необмежену количесво раз і всі вони будуть пов'язані. У даній статті наводяться за все три списки, що, по-моєму, досить для розуміння методу як такого і створення на його основі поліпшених алгоритмів реалізації завдання.

Постановка завдання: зв'язати три (країна, область, місто) випадають списку використовуючи $ .ajax (JQuery) без перезавантаження сторінки, причому дані беруться з бази mySQL.

Для початку створимо пов'язані таблиці в базі:
Напишемо наступний html код:
Зверніть увагу на 2 порожніх діва «selectDataRegion» і «selectDataCity», в них ми будемо вставляти згенеровані випадають списки. Селект з країнами згенерований за допомогою запиту в базу з сортуванням по полю назви країни. Впринципі, якщо перший список у Вас статичний і дані незмінні, то можна просто написати дані в html і не використовувати першу таблицю бази, але тоді прийдеться більш уважно ставиться до зв'язці країни і value select відповідно.

Створимо файл виконання /action/ajax.base.php:
Залишилося тепер протестувати. Виберіть «Україна» -> «Донецька обл.» -> «Місто» і буде Вам щастя! В якості домашнього завдання можна реалізувати так: не приховувати списки областей і міст, а замість порожніх Дивов показувати ті ж списки, що випадають, тільки прописати в них один нульовий параметр з тескстом вибору даних в ранньому СЕЛЕКТА або маніпулювати параметром «disabled».