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

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

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

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

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

<div class="form-group city-select">
 ...
</div>
.city-select{
 display: none;
}

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

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
$(function(){

 $('#country').change(function(){
  var code = $(this).val();
  $('#city').load('index.php', {code: code}, function(){
 $('.city-select').fadeIn('slow');
  });

 });

});

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

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

function getCities(){
 global $db;
 $code = mysqli_real_escape_string($db, $_POST['code']);
 $query = "SELECT ID, Name FROM city WHERE CountryCode = '$code'";
 $res = mysqli_query($db, $query);
 $data = '';
 while($row = mysqli_fetch_assoc($res)){
  $data .= "<option value='{$row['ID']}'>{$row['Name']}</option>";
 }
 return $data;
}

if(!empty($_POST['code'])){
 echo getCities();
 exit;
}

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

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

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

  1. Леонид

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

  2. Тихон

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

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

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

  3. Дмитрий

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

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

      Здравствуйте.
      Есть такие уроки, ссылку на них я даже давал в конце статьи. Правда, эти уроки платные.

      • Дмитрий

        Спасибо за ответ. Меня интересует 3 списка. Цена примера.
        Спасибо

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

          В правом верхнем углу есть кнопка оформления подписки на раздел. Перейдя по ней Вы найдете описание условий и тарифов. Минимальный тариф — 570р. После оформления подписки Вы получаете доступ ко всем урокам раздела.

  4. Дмитрий

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree