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

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

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим реализацию зависимых список с использованием AJAX. Напомню, в предыдущей статье мы подготовили базу данных и вывели из нее список стран. Теперь нам необходимо при выборе страны отправить ajax запрос на сервер и получить список городов, который мы и должны подгрузить в зависимый список select. Продолжим.

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

Первое, что я хочу сделать, это скрыть список городов до выбора страны. Смысла показывать пустой зависимый список нет, поэтому будет логичным его скрыть. Для этого дадим дополнительный класс city-select блоку в котором находится список городов и скроем этот класс:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Теперь необходим функционал, который будет отправлять ajax запрос при изменении списка стран, т.е. в тот момент, когда мы выберем страну. Код будет примерно таким:

Давайте пройдемся по нему. Итак, метод change() сработает тогда, когда происходит изменение списка стран. В этом случае мы получаем код выбранной страны и для списка городов вызываем метод load(), который сделает запрос ajax и подгрузит полученные в ответе данные в зависимый список городов. После завершения операции мы просто показываем список городов.

Теперь необходимо принять данные на сервере. Для этого напишем функцию получения городов выбранной страны, и вызовем ее, если был получен код страны. Добавим данный код перед получением списка стран:

И проверим работу зависимого списка. К примеру, выберу Украину. В результате я действительно получаю список украинских городов, которые есть в нашей БД:

Замечательно, не правда ли. Теперь выбирая любую страну, зависимый список городов будет каждый раз изменяться. Вот так примерно и реализуются зависимые списки. Достаточно просто. Более сложную реализацию зависимых списков вы можете найти в уроках Зависимые списки средствами AJAX. На этом у меня все. Удачи!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

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

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

Комментарии Facebook:

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

  1. Леонид

    Да, когда разметка генерируется по данным из БД это намного упрощает жизнь) Доработал свою базу.

  2. Тихон

    Добрый день, а как сделать, чтобы при выбора города и области выводилась информация, что регион такой то, номер телефона и т.д

    • Андрей Кудлай

      Здравствуйте. Запросом достать из БД всю необходимую Вам информацию. Регион уже есть в таблице городов. Относительно телефона, то здесь, наверное, речь не о телефоне, а о коде города, который можно также добавить в таблицу городов. Ну а затем при выборе города отправлять по тому же принципу ajax запрос и получать необходимые данные.

  3. Дмитрий

    Здравствуйте! Нет ли у Вас примера с тремя динамическими списками.
    Или, как переделать код под три списка, пробовал, пока не получается.

  4. Дмитрий

    P.S. Дайте, пожалуйста Вашу электронную почту для заявки.

  5. Артем

    Может ли автор помочь? У меня не подгружаются города.

Добавить комментарий