Зависимые списки select с помощью AJAX. Часть 1

Зависимые списки select с помощью AJAX

От автора: приветствую вас, друзья. В этой статье мы с вами познакомимся с понятием зависимых списков и создадим зависимые списки select, используя AJAX. Приступим.

Исходные файлы текущей статьи вы можете скачать по ссылке.

Сразу договоримся, что мы реализуем простейший пример зависимых списков, чтобы понять принцип работы с ними. Более продвинутое решение вы можете найти в уроках Зависимые списки средствами AJAX.

Итак, что же такое зависимые списки? Полагаю, вы могли видеть их уже не раз при заполнении всевозможных форм. Судя по названию, это списки, которые каким-то образом зависят друг от друга. И это действительно так. Яркий пример это список стран и список городов. Мы без проблем можем вывести список всех стран мира, их будет несколько сотен. Но вот выводить список городов всех этих стран — дело бессмысленное, поскольку мы получим список из тысяч городов.

В этом случае как раз и принято использовать зависимые списки. Изначально мы выводим список стран. Ну а после того, как пользователь выберет страну, мы отправляем запрос на сервер и получаем только города выбранной страны, которые и вставляем в список городов. Это удобно для пользователя, поскольку он выбирает город уже из гораздо меньшего списка. Думаю, идея понятна. Давайте реализуем ее в коде.

Начнем с данных, которые нам потребуются для работы. Чтобы не создавать БД, я воспользуюсь уже готовой, это будет БД world, которую вы можете скачать с официального сайта MySQL или просто взять из исходников. В этой базе вы найдете три таблицы: страны, города и языки. В работе нам пригодятся таблицы городов и стран.

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

Вот такая форма у нас получилась:

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

Теперь пройдемся по полученному массиву стран и выведем их элементами списка стран.

Как видим, страны выводятся:

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

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (2)