Зависимые списки 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:

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

  1. Леонид

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

  2. Тихон

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

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

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

  3. Дмитрий

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

  4. Дмитрий

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

  5. Артем

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

  6. Oksana

    Автор, подскажите, пожалуйста, какая часть кода отвечает за работу кнопки? Мне не нужно, чтобы по ее нажатию дублировались данные из выпадающего списка, но я никак не могу это исправить, даже если прописываю своё if(isset($_POST['knopka']…

    • Андрей

      Никакая. Кнопка никак не связана с получением данных для выпадающих списков. Данные получаются при изменении списка.

      • Oksana

        Ох, а не подскажите как сделать так, чтобы при нажатии на кнопку появлялось, например, значение из второго выпадающего списка на той же странице? А то у меня при нажатии переходит на новую пустую страницу и показаны все варианты из выпадающего списка, а не только выбранный. (надеюсь понятно объяснила)

        • Андрей

          В общем случае примерно так. Создайте функцию для получения страны и города по данным из формы:
          function getData(){
          global $db;
          $data = [];
          $code = mysqli_real_escape_string($db, $_POST['country']);
          $city_id = mysqli_real_escape_string($db, $_POST['city']);
          $country = mysqli_query($db, "SELECT Name FROM country WHERE Code = '$code'");
          $city = mysqli_query($db, "SELECT Name FROM city WHERE ID = '$city_id'");
          $row_country = mysqli_fetch_assoc($country);
          $row_city = mysqli_fetch_assoc($city);
          $data['country'] = $row_country['Name'];
          $data['city'] = $row_city['Name'];
          return $data;
          }

          И в нужном месте страницы получайте данные из этой функции:
          if(!empty($_POST)){
          var_dump(getData());
          }