Главная->Уроки по js->Динамическая подгрузка данных для 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" 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.