Залежні списки select з допомогою AJAX. Частина 1

31

Від автора: вітаю вас, друзі. У цій статті ми з вами познайомимося з поняттям залежних списків і створимо залежні списки select, використовуючи AJAX. Приступимо.

Вихідні файли поточної статті ви можете завантажити за посиланням.

Відразу домовимося, що ми реалізуємо найпростіший приклад залежних списків, щоб зрозуміти принцип роботи з ними. Більш просунуте рішення ви можете знайти на уроках Залежні списки засобами AJAX.

Отже, що ж таке залежні списки? Думаю, ви могли бачити їх вже не раз при заповненні різноманітних форм. Судячи з назви, це списки, які якимось чином залежать один від одного. І це дійсно так. Яскравий приклад це список країн і список міст. Ми без проблем можемо вивести список всіх країн світу, їх буде кілька сотень. Але ось виводити список міст всіх цих країн — справа безглузда, оскільки ми отримаємо список з тисячі міст.

В цьому випадку якраз і прийнято використовувати залежні списки. Спочатку ми виводимо список країн. Ну а після того, як користувач вибере країну, ми відправляємо запит на сервер і отримуємо тільки міста обраної країни, які і вставляємо в список міст. Це зручно для користувача, оскільки він вибирає місто вже з набагато меншого списку. Думаю, ідея зрозуміла. Давайте реалізуємо її в коді.

Почнемо з даних, які нам будуть потрібні для роботи. Щоб не створювати БД, я скористаюся вже готової, це буде БД world, яку ви можете завантажити з офіційного сайту MySQL або просто взяти з исходников. У цій базі ви знайдете три таблиці: країни, міста і мови. У роботі нам знадобляться таблиці міст і країн.

Тепер нам потрібно форма з двома списками. Приблизно так вони будуть виглядати:

Країна

Виберіть країну
Aruba
Afghanistan
Angola
Місто

Виберіть місто

Ось така форма у нас вийшло:

Поки що я вручну прописав кілька країн, але зараз ми їх отримаємо з БД. Пропишемо підключення до БД і опишемо функцію отримання країн. Все це я буду робити в одному файлі, на початку файлу index.php. В реальному проекті, звичайно ж, бажано розділити функції, завдання та подання.

$db = mysqli_connect(«localhost», «root», «», «world») or die(«Немає з’єднання з БД»);
mysqli_set_charset($db, «utf8») or die(«Не встановлена кодування з’єднання»);
function getCountries(){
global $db;
$query = «SELECT Code, Name FROM country»;
$res = mysqli_query($db, $query);
return mysqli_fetch_all($res, MYSQLI_ASSOC);
}
$countries = getCountries();

Тепер пройдемося по отриманому масиву країн і виведемо їх елементами списку країн.

Виберіть країну

Як бачимо, країни виводяться:

Відмінно! У наступній статті ми займемося вже безпосередньо реалізацією залежного списку міст, відправляючи ajax запит при виборі країни. Ну а поточна стаття на цьому завершена. Удачі!