От автора: приветствую вас, друзья. В этой статье мы с вами продолжим реализацию зависимых список с использованием AJAX. Напомню, в предыдущей статье мы подготовили базу данных и вывели из нее список стран. Теперь нам необходимо при выборе страны отправить ajax запрос на сервер и получить список городов, который мы и должны подгрузить в зависимый список select. Продолжим.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Первое, что я хочу сделать, это скрыть список городов до выбора страны. Смысла показывать пустой зависимый список нет, поэтому будет логичным его скрыть. Для этого дадим дополнительный класс city-select блоку в котором находится список городов и скроем этот класс:
| 1 2 3 | <div class="form-group city-select"> ... </div> |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее| 1 2 3 | .city-select{ display: none; } |
Теперь необходим функционал, который будет отправлять ajax запрос при изменении списка стран, т.е. в тот момент, когда мы выберем страну. Код будет примерно таким:
| 1 2 3 4 5 6 7 8 9 10 11 | $(function(){ $('#country').change(function(){ var code = $(this).val(); $('#city').load('index.php', {code: code}, function(){ $('.city-select').fadeIn('slow'); }); }); }); |
Давайте пройдемся по нему. Итак, метод change() сработает тогда, когда происходит изменение списка стран. В этом случае мы получаем код выбранной страны и для списка городов вызываем метод load(), который сделает запрос ajax и подгрузит полученные в ответе данные в зависимый список городов. После завершения операции мы просто показываем список городов.
Теперь необходимо принять данные на сервере. Для этого напишем функцию получения городов выбранной страны, и вызовем ее, если был получен код страны. Добавим данный код перед получением списка стран:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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. На этом у меня все. Удачи!
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее
Да, когда разметка генерируется по данным из БД это намного упрощает жизнь) Доработал свою базу.
Добрый день, а как сделать, чтобы при выбора города и области выводилась информация, что регион такой то, номер телефона и т.д
Здравствуйте. Запросом достать из БД всю необходимую Вам информацию. Регион уже есть в таблице городов. Относительно телефона, то здесь, наверное, речь не о телефоне, а о коде города, который можно также добавить в таблицу городов. Ну а затем при выборе города отправлять по тому же принципу ajax запрос и получать необходимые данные.
Здравствуйте! Нет ли у Вас примера с тремя динамическими списками.
Или, как переделать код под три списка, пробовал, пока не получается.
Здравствуйте.
Есть такие уроки, на них я даже давал в конце статьи. Правда, эти уроки платные.
Спасибо за ответ. Меня интересует 3 списка. Цена примера.
Спасибо
В правом верхнем углу есть кнопка оформления подписки на раздел. Перейдя по ней Вы найдете описание условий и тарифов. Минимальный тариф — 570р. После оформления подписки Вы получаете доступ ко всем урокам раздела.
P.S. Дайте, пожалуйста Вашу электронную почту для заявки.
Может ли автор помочь? У меня не подгружаются города.
Артем, в начале статьи есть ссылка на исходники, которые можно скачать и использовать. Там рабочий код, в котором города подгружаются.
Пожалуйста свяжитесь со мной. У меня уже сил нет это настраивать! я заплачу
К сожалению, вряд ли получится, я уже давно не работаю на заказ, просто не хватает на это времени.
Автор, подскажите, пожалуйста, какая часть кода отвечает за работу кнопки? Мне не нужно, чтобы по ее нажатию дублировались данные из выпадающего списка, но я никак не могу это исправить, даже если прописываю своё if(isset($_POST['knopka']…
Никакая. Кнопка никак не связана с получением данных для выпадающих списков. Данные получаются при изменении списка.
Ох, а не подскажите как сделать так, чтобы при нажатии на кнопку появлялось, например, значение из второго выпадающего списка на той же странице? А то у меня при нажатии переходит на новую пустую страницу и показаны все варианты из выпадающего списка, а не только выбранный. (надеюсь понятно объяснила)
В общем случае примерно так. Создайте функцию для получения страны и города по данным из формы:
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());
}