Создаём зависимые списки с помощью jQuery и AJAX

Создаём зависимые списки с помощью jQuery и AJAX

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

<?php // файл city.php

$city = array (
'Москва и Московская обл.' => array (
0 => 'Москва',
1 => 'Абрамцево',
// ...
),
'Санкт-Петербург и область' => array (
0 => 'Санкт-Петербург',
1 => 'Александровская',
// ...
),
// ...
);

?>

Создаём два select-а, в одном будут области, в другой будут подгружаться города

<select name="region" onchange="loadCity(this)">
<option></option>

<?php // заполняем список областей
foreach ($city as $region => $cityList)
{
echo '<option value="' . $region . '">' . $region . '</option>' . "\\n";
}
?>

</select>

<select name="city" disabled="disabled">
<option>Выберите область</option>
</select>

При выборе области, сработает функция loadCity, которая подгрузит список городов. Определим её:

function loadCity(select)
{
var citySelect = $('select[name="city"]');

// послыаем AJAX запрос, который вернёт список городов для выбранной области
$.getJSON('index.php', {action:'getCity', region:select.value}, function(cityList){
citySelect.html(''); // очищаем список городов

// заполняем список городов новыми пришедшими данными
$.each(cityList, function(i){
citySelect.append('<option value="' + i + '">' + this + '</option>');
});
});
}

Ну и php скрипт который отдаст в JSON формате список городов конкретной области:

<?php // файл index.php

require_once('city.php');

if (isset($_GET['action']) && $_GET['action'] == 'getCity')
{
if (isset($city[$_GET['region']]))
{
echo json_encode($city[$_GET['region']]); // возвращаем данные в JSON формате;
}
else
{
echo json_encode(array('Выберите область'));
}

exit;
}

?>

Все файлы должны быть в кодировке UTF-8 without BOM, а сервер должен отдавать заголовки с правильно указанным charset (для этого в исходниках есть файл .htaccess)
СКАЧАТЬ

0 comments
Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *