VESELOV.SUMY.UA

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

---

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

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

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

    
 
        foreach ($city as $region => $cityList)
    {
        echo '' . $region . '' . "\n";
    }
    ?>
 

 

    Выберите область

При выборе области, сработает функция 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('' + this + '');
        });
    });
}

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

 
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)
СКАЧАТЬ