Традиционно ваша задача решается так.
Есть два списка select:
<!-- Вызываем при изменении нашу функцию -->
<select name="contry" onChange="loadList(this)">
<option value="" selected="selected"></option>
<option value="rus">Россия</option>
<option value="usa">США</option>
</select>
<select disabled="disabled" name="city" id="cityList">
<option></option>
</select>
Пишется код, работающий по концепции AJAX:
// Создаём объект асинхронной загрузки с сервера.
var HTTPReq = XMLHttpRequest ?
new XMLHttpRequest() :
new ActiveXObject("Microsoft.XMLHTTP");
// Устанавливаем обработчик ответа от сервера:
HTTPReq.onreadystatechange = function()
{
// Если загружено полностью:
if(HTTPReq.readyState == 4)
{
// Обрабатываем ответ:
var Cities = eval("("+HTTPReq.responseText+")");
// Заполняем список:
fillCityList(Cities);
}
}
// Запоминаем выбранную страну, чтоб не
// дублировать запросы в будущем.
var selectedContry = null;
// Функция, вызываемая при изменении списка
// (при выборе страны)
function loadList(contryList)
{
// Если выбран "пустой" вариант - очищаем список:
if(contryList.value === "")
{
clearCityList();
return;
}
// Проверяем выбрана ли уже какая-то страна:
if(selectedContry !== null)
{
// Если выбрана, проверяем не текущая ли выбрана:
if(selectedContry == contryList.value)
{
// Если текущая уже выбрана - делать нечего.
return;
}
}
// Если никакая не выбрана, или выбрана не текущая, ставим текущую.
selectedContry = contryList.value;
// Далее запрашиваем сервер на предмет списка городов выбранной страны.
// Тут должна быть ваша страница php, её работа будет описана далее:
HTTPReq.open("GET", "page.php?country="+contryList.value);
HTTPReq.send(null);
// После этого будет вызван обработчик (который мы писали ранее, так что выходим)
return true;
}
// Фукнция, которая добавляет элементы в список городов:
function fillCityList(elements)
{
// elements передан в формате JSON, так что щас он - объект
// для начала очистим текущий список городов
clearCityList();
// Уберём статус неактивен с элемента:
var cityList = document.getElementById("cityList");
cityList.disabled = false;
// Скидываем счётчик option'ов (1 - потому что первый элемент пуст)
var i = 1;
// Рассмотрим elements, в котором ключи это values, а значения - имена.
for(var key in elements)
{
// Создаём и добавляем элемент в список:
var City = new Option(elements[key], key, false, false);
cityList.options[i++] = City;
}
// Всё.
return true;
}
// Функция, которая очищает все элементы из второго списка:
function clearCityList()
{
var cityList = document.getElementById("cityList");
// Такое очищение, походу, работает во всех браузерах нормально.
while (cityList.length > 0) cityList.options[0] = null;
cityList.options[0] = new Option('', 0, false, false);
// Установим его в неактивный
cityList.disabled = "disabled";
}
PHP скрипт должен найти в базе данных городов, города из данной страны, и возвратить их назад в воспринимаемом для JavaScript виде. Лучше всего, если это будет JSON.
Т.е ответ должен выглядить так:
{"new_york": "New York", "dallas": "Dallas", "city": "city"}
Допустим база данных у вас такая:
| identy | name | contry |
-------------
| spb | Санкт-Петербург | rus |
| spb | Санкт-Петербург | rus |
| ny | Нью-Йорк | usa |
Тогда PHP скрипт должен быть примерно такой:
<?php
// Если не получен параметр - выходим
if(!array_key_exists('contry', $_GET)) die();
// Подключаемся к БД
mysql_connect('localhost', 'login', 'passwd');
mysql_select_db('database');
// Составляем безопасный запрос:
$query = sprintf("SELECT identy, name FROM cities_list WHERE country='%s'",
mysql_real_escape_string($_GET['country']));
// Выполняем запрос:
$result = mysql_query($query);
$output = array();
// Проходим циклом по результату
while($row = mysql_fetch_assoc($result))
{
$output[] = '"'.addslashes($row['identy'].'": "'.
'"'.addslashes($row['title']).'"';
}
// Выводим, если есть что выводить:
if(sizeof($output) > 0)
{
echo '{'. implode(',', $output) .'}';
}
((
))
