Untitled

<?php
header('Content-Type: text/html; charset=utf-8');

/*
CREATE TABLE IF NOT EXISTS `city` (
  `id` smallint(5) unsigned NOT NULL auto_increment,
  `name` varchar(100) NOT NULL default '',
  `pid` smallint(5) unsigned NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

INSERT INTO `city` (`id`, `name`, `pid`) VALUES
(1, 'Категория 1', 0),
(2, 'Категория 2', 0),
(3, 'Категория 1.1', 1),
(4, 'Категория 1.2', 1),
(5, 'Категория 2.1', 2),
(6, 'Категория 2.1', 2);
*/

mysql_connect('localhost', '...', '...');
mysql_select_db('...');
mysql_query("SET NAMES 'UTF8'");

$action = isset($_REQUEST['action']) ? $_REQUEST['action'] : '';

// возвращаем список городов
if ($action == 'getCity')
{
    $result = mysql_query("SELECT id, name FROM city WHERE pid = '" . (int)$_GET['id'] . "'");

    if ($result)
    {
        $city = array();

        while ($row = mysql_fetch_array($result))
        {
            $city[$row['id']] = $row['name'];
        }

        echo json_encode($city);
    }
    else
    {
        echo json_encode(array('Выберите область'));
    }

    exit;
}

// выводим пришедшие данные
if ($action == 'postResult')
{
    echo '<pre>' . htmlspecialchars(print_r($_POST, true)) . '</pre>';
    exit;
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Зависимые списки</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style>
        body {font-family:Verdana; font-size:12px;}
    </style>
    <script type="text/javascript">
    // <![CDATA[
        function loadCity(select)
        {
            var citySelect = $('select[name="city"]');
            citySelect.attr('disabled', 'disabled'); // делаем список городов не активным

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

                citySelect.html(''); // очищаем список городов

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

                citySelect.removeAttr('disabled'); // делаем список городов активным

            });
        }
    // ]]>
    </script>
</head>
<body>
    <form action="index.php" method="post">
        <select name="region" onchange="loadCity(this)">
            <option></option>

            <?php
            $result = mysql_query("SELECT id, name FROM city WHERE pid = 0");

            while ($row = mysql_fetch_array($result))
            {
                echo '<option value="' . $row['id'] . '">' . $row['name'] . '</option>' . "\n";
            }
            ?>

        </select>

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

        <input type="hidden" name="action" value="postResult" />
        <input type="submit" value="отправить" />
    </form>

    <br /><br /><a href="/blog/javascript/36">вернуться к статье</a>
</body>
</html>