На некоторых сайтах при заполнении формы происходит динамическая подгрузка данных для select . Например, после того, как Вы укажете страну, автоматически будут подгружены в следующий 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">
<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.
