Динамическая подгрузка данных для 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.
-
Создано 08.07.2013 03:18:40
-
Михаил Русаков
Комментарии (19):
Спасибо, хорошая статья, побольше бы таких по js, js это полезно
Ответить
Побольше бы вообще нормальных статей
Ответить
Заранее извините, если вопрос глупый. Я начинающий в этом деле. В данном коде, если я правильно понимаю,в form action="#" вместо # вставляем адрес php страницы, куда мы копируем php код. Нужно ли еще что-то менять или создать еще какие-то страницы..я запуталась) помогите пожалуйста,проблема в том, что при выборе страны, города не выводятся.
Ответить
Работоспособность от того, что стоит в action не зависит. Проверьте, что у Вас есть Denwer, и он запущен, и вот ещё почитайте http://myrusakov.ru/php-start.html
Ответить
Михаил, спасибо за ответ, а данный код работает только с Денвером? у меня easyphp, я через него открываю страницу с кодом. Я скопировала вами приведенный код javascript с кодом формы и сразу после него скопировала серверную часть php. Все в body, запускаю через easyphp (с ним проблем нет), но php код появляется на странице просто в виде кода, т.е. не обрабатывается. Подскажите пожалуйста, в чем моя ошибка
Ответить
http://myrusakov.ru/php-start.html - вот это почитайте.
Ответить
Михаил а похожа ли эта система которою Вы представили в статье на автаматическую систему зависемых списков на сайте http://www.mamba.ru/???
Ответить
Да.
Ответить
Если использовать библиотеку jQuery - код получится в 2 раза меньше, для этого ведь есть метод $.ajax(). И не нужно будет делать трай и кэтчи чтобы определить что подходит браузеру. Код конечно выглядит грандиозно :) Я так на русских курсах по JS учился, пока не стал использовать jQuery - жизнь стала проще :) http://api.jquery.com/jQuery.ajax/
Ответить
Ув. Михаил. Подскажите, пожалуйста. Скопировала указанный код в файл test.php. Php код скопировала в файл cities.php. При запуске http://localhost/test.php/ города не отобразились. Но если поменять строку xmlhttp.open('POST', '/cities.php/', true); (cities.php - поставить между слешами) то вместо городов отдается null.
Ответить
Надо сохранять файл cities.php в кодировке UTF-8. Либо писать названия городов латиницей.
Ответить
Здравствуйте, могу ли я немного обсудить с вами одну строчку кода который предоставлен выше, в целях саморазвития и углубления знаний. В общем к этой строчке: (xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем кодировку), по моему мнению, не совсем правильно указан комментарий. Может я и не прав, но я буду очень признателен если вы меня грамотно поправите. Я считаю, что здесь отправляется не кодировка, а, на сколько мне известно, симулируется отправка формы, но на самом деле форма не отправляется. Не могли бы вы меня вразумить и помочь разобраться? :)
Ответить
Это просто отправка заголовка, тогда уж, и больше ничего.
Ответить
Вас не затруднит создать небольшой урок, на схожую тему, только, чтоб при выборе одного из пунктов выпадающего списка, он был активным даже после обновления страницы. Вот пример toramp.com/schedule.php
Ответить
Добрый день! Михаил, подскажите пожалуйста, а как мне прочитать с помощью JS выбранное значение, сформированного приведенным выше способом, списка, например для дальнейшей отправки в php скрипт.Спасибо
Ответить
Как получить правильный массив из цикла? Array ([0] => Москва [1] => Санкт-Петербург )
Ответить
Получилось так, но ключ должен соответствовать $id. Array ([0] => BMW[1] => Skoda ) foreach($brand as $key => $row){ $brand[$key] = $row["name"]; } print_r($brand);
Ответить
Спасибо, классный кшд
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.