Динамическая подгрузка данных для select


На некоторых сайтах при заполнении формы происходит динамическая подгрузка данных для select. Например, после того, как Вы укажете страну, автоматически будут подгружены в следующий select города, принадлежащие этой стране. И недавно меня попросили написать о том, как это делается. Начнём с формы и JavaScript-кода: <script type="text/javascript"> function getXmlHttp() { var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function changeCountry(id) { var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP xmlhttp.open('POST', 'cities.php', true); // Открываем асинхронное соединение xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем кодировку xmlhttp.send("id=" + encodeURIComponent(id)); // Отправляем POST-запрос xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера if (xmlhttp.readyState == 4) { // Ответ пришёл if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо) var cities = JSON.parse(xmlhttp.responseText); // Преобразуем JSON-строку в массив var text = "<option value=''>Выберите город</option>"; // Начинаем создавать элементы в select for (var i in cities) { /* Перебираем все элемены и создаём набор options */ text += "<option value='" + i + "'>" + cities[i] + "</option>"; } document.myform.cities.innerHTML = text; // Устанавливаем options в select } } }; } </script> <form name="myform" action="#" method="post"> <div> <select name="countries" onchange="changeCountry(this.value)"> <option value="">Выберите страну</option> <option value="0">Россия</option> <option value="1">Украина</option> </select> </div> <br /> <div> <select name="cities"> <option value="">Выберите город</option> </select> </div> </form> При изменении значения в select со странами делается запрос на сервер, отправляя при этом id выбранной страны. Сервер возвращает список городов, соответсвующих id выбранной страны. Теперь и сама серверная часть: <?php if ($_POST["id"] == "0") echo json_encode(array("0" => "Москва", "1" => "Санкт-Петербург")); elseif ($_POST["id"] == "1") echo json_encode(array("2" => "Киев", "3" => "Одесса")); ?> Здесь я думаю всё очень прозрачно. Безусловно, данные могут подгружаться из базы данных. Главное, полученные массивы преобразовать в JSON-строку, которую и отправить уже клиентской части. Вот так делается динамическая подгрузка данных для select с использованием JavaScript, технологии Ajax и PHP.