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

Дата публикации: 2016-10-26

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

От автора: приветствую вас, друзья. В этой статье мы с вами познакомимся с понятием зависимых списков и создадим зависимые списки select, используя AJAX. Приступим.

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

Сразу договоримся, что мы реализуем простейший пример зависимых списков, чтобы понять принцип работы с ними. Более продвинутое решение вы можете найти в уроках Зависимые списки средствами AJAX.

Итак, что же такое зависимые списки? Полагаю, вы могли видеть их уже не раз при заполнении всевозможных форм. Судя по названию, это списки, которые каким-то образом зависят друг от друга. И это действительно так. Яркий пример это список стран и список городов. Мы без проблем можем вывести список всех стран мира, их будет несколько сотен. Но вот выводить список городов всех этих стран — дело бессмысленное, поскольку мы получим список из тысяч городов.

В этом случае как раз и принято использовать зависимые списки. Изначально мы выводим список стран. Ну а после того, как пользователь выберет страну, мы отправляем запрос на сервер и получаем только города выбранной страны, которые и вставляем в список городов. Это удобно для пользователя, поскольку он выбирает город уже из гораздо меньшего списка. Думаю, идея понятна. Давайте реализуем ее в коде.

Начнем с данных, которые нам потребуются для работы. Чтобы не создавать БД, я воспользуюсь уже готовой, это будет БД world, которую вы можете скачать с официального сайта MySQL или просто взять из исходников. В этой базе вы найдете три таблицы: страны, города и языки. В работе нам пригодятся таблицы городов и стран.

Теперь нам потребуется форма с двумя списками. Примерно так они будут выглядеть:

<div class="form-group">
	<label for="name" class="col-sm-2 control-label">Страна</label>
	<div class="col-sm-6">
		<select class="form-control" name="country" id="country">
			<option disabled selected>Выберите страну</option>
			<option value="Aruba">Aruba</option>
			<option value="Afghanistan">Afghanistan</option>
			<option value="Angola">Angola</option>
		</select>
	</div>
</div>
<div class="form-group">
	<label for="name" class="col-sm-2 control-label">Город</label>
	<div class="col-sm-6">
		<select class="form-control" name="city" id="city">
			<option disabled>Выберите город</option>
		</select>
	</div>
</div>

<label for="name" class="col-sm-2 control-label">Страна</label>

<option disabled selected>Выберите страну</option>

<option value="Aruba">Aruba</option>

<option value="Afghanistan">Afghanistan</option>

<option value="Angola">Angola</option>

</select>

</div>

<label for="name" class="col-sm-2 control-label">Город</label>

<option disabled>Выберите город</option>

</select>

</div>

Вот такая форма у нас получилась:

Пока что я вручную прописал несколько стран, но сейчас мы их получим из БД. Пропишем подключение к БД и опишем функцию получения стран. Все это я буду делать в одном файле, в начале файла index.php. В реальном проекте, конечно же, желательно разделить функции, вызов и представления.

$db = mysqli_connect("localhost", "root", "", "world") or die("Нет соединения с БД");
mysqli_set_charset($db, "utf8") or die("Не установлена кодировка соединения");

function getCountries(){
	global $db;
	$query = "SELECT Code, Name FROM country";
	$res = mysqli_query($db, $query);
	return mysqli_fetch_all($res, MYSQLI_ASSOC);
}

$countries = getCountries();

$db = mysqli_connect("localhost", "root", "", "world") or die("Нет соединения с БД");

mysqli_set_charset($db, "utf8") or die("Не установлена кодировка соединения");

function getCountries(){

global $db;

$query = "SELECT Code, Name FROM country";

$res = mysqli_query($db, $query);

return mysqli_fetch_all($res, MYSQLI_ASSOC);

}

$countries = getCountries();

Теперь пройдемся по полученному массиву стран и выведем их элементами списка стран.

<select class="form-control" name="country" id="country">
	<option disabled selected>Выберите страну</option>
	<?php foreach($countries as $country): ?>
	<option value="<?=$country['Code']?>"><?=$country['Name']?></option>
	<?php endforeach; ?>
</select>

<option disabled selected>Выберите страну</option>

<?php foreach($countries as $country): ?>

<?php endforeach; ?>

</select>

Как видим, страны выводятся:

Отлично! В следующей статье мы займемся уже непосредственно реализацией зависимого списка городов, отправляя ajax запрос при выборе страны. Ну а текущая статья на этом завершена. Удачи!

Метки: формы