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

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

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

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

<div class="form-group city-select">
	...
</div>

.city-select{
	display: none;
}

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

$(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 с нуля до результата!

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

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