ВотЪ (:
Файл index.php
<script type="text/javascript" src="district.js"></script>
Область:
<select name="Area" style="width:130px" onchange="AreaList(this)">
<option value="0" selected="selected">Выбор</option>
<option value="1">Крым</option>
<option value="2">Киевская</option>
<option value="3">Волынская</option>
<option value="4">Одесская</option>
</select>
Районный центр:
<select disabled="disabled" name="District_List" style="width:130px" id="District_List">
<option>Выбор</option>
</select>
Файл district.js
function District_makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest)
{ // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject)
{ // IE
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{}
}
}
if (!http_request)
{
alert('Не получается отправить XMLHTTP запрос');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents()
{
if (http_request.readyState == 4)
{
var Districties = eval("("+http_request.responseText+")");
// Заполняем список:
fillDistrict_List(Districties);
}
}
// Запоминаем выбранную страну, чтоб не
// дублировать запросы в будущем.
var selectedArea = null;
// Функция, вызываемая при изменении списка
// (при выборе страны)
function AreaList(AreaList)
{
// Если выбран "пустой" вариант - очищаем список:
if(AreaList.value === "")
{
clearDistrict_List();
return;
}
// Проверяем выбрана ли уже какая-то страна:
if(selectedArea !== null)
{
// Если выбрана, проверяем не текущая ли выбрана:
if(selectedArea == AreaList.value)
{
// Если текущая уже выбрана - делать нечего.
return;
}
}
// Если никакая не выбрана, или выбрана не текущая, ставим текущую.
selectedArea = AreaList.value;
// Далее запрашиваем сервер на предмет списка городов выбранной страны.
// Тут должна быть ваша страница php, её работа будет описана далее:
District_makeRequest("district_select.php?district="+AreaList.value+"&rand="+Math.random());
// После этого будет вызван обработчик (который мы писали ранее, так что выходим)
return true;
}
// Фукнция, которая добавляет элементы в список городов:
function fillDistrict_List(elements)
{
// elements передан в формате JSON, так что щас он - объект
// для начала очистим текущий список городов
clearDistrict_List();
// Уберём статус неактивен с элемента:
var District_List = document.getElementById("District_List");
District_List.disabled = false;
// Скидываем счётчик option'ов (1 - потому что первый элемент пуст)
var i = 1;
// Рассмотрим elements, в котором ключи это values, а значения - имена.
for(var key in elements)
{
// Создаём и добавляем элемент в список:
var District = new Option(elements[key], key, false, false);
District_List.options[i++] = District;
}
return true;
}
// Функция, которая очищает все элементы из второго списка:
function clearDistrict_List()
{
var District_List = document.getElementById("District_List");
// Такое очищение, походу, работает во всех браузерах нормально.
while (District_List.length > 0) District_List.options[0] = null;
District_List.options[0] = new Option('', 0, false, false);
// Установим его в неактивный
District_List.disabled = "disabled";
}
Файл district_select.php
if(!array_key_exists('district', $_GET)) die();
// Подключаемся к БД
mysql_connect("$user_host", "$user_name", "$user_pass");
mysql_select_db ("$user_base");
// Составляем безопасный запрос:
$query = sprintf("SELECT * FROM district WHERE area='%s'",
mysql_real_escape_string($_GET['district']));
// Выполняем запрос:
$result = mysql_query($query);
$output = array();
// Проходим циклом по результату
while($row = mysql_fetch_assoc($result))
{
$output[] = '"'.addslashes($row['id']).'": '.
'"'.addslashes($row['name']).'"';
}
// Выводим, если есть что выводить:
if(sizeof($output) > 0)
{
echo '{'. implode(',', $output) .'}';
}