Залежні списки select з допомогою AJAX. Частина 2

26

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо реалізацію залежних список з використанням AJAX. Нагадаю, у попередній статті ми підготували базу даних і вивели з неї список країн. Тепер нам необхідно при виборі країни відправити ajax запит на сервер і отримати список міст, який ми і повинні довантажити в залежний список select. Продовжимо.

Вихідні файли поточної статті ви можете завантажити за посиланням.

Перше, що я хочу зробити, це сховати список міст до вибору країни. Сенсу показувати порожній залежний списку немає, тому буде логічним його приховати. Для цього дамо додатковий клас city-select блоку в якому знаходиться список міст і приховаємо цей клас:

.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 .= «{$row[‘Name’]}»;
}
return $data;
}
if(!empty($_POST[‘code’])){
echo getCities();
exit;
}

І перевіримо роботу залежного списку. Приміром, виберу Україну. В результаті я дійсно отримую список українських міст, які є в БД:

Чудово, чи не правда. Тепер вибираючи будь-яку країну, залежний список міст буде щоразу змінюватися. Ось так приблизно і реалізуються залежні списки. Досить просто. Більш складну реалізацію залежних списків ви можете знайти на уроках Залежні списки засобами AJAX. На цьому у мене все. Удачі!