В последнее время часто спрашивают, как сделать «интерактивный select». Это когда есть два списка, и набор вариантов во втором списке зависит от того, что выбрано в первом. При этом, разумеется, все это должно происходить без перезагрузки страницы.
Все это можно реализовать на чистом JavaScript, перечислив необходимые параметры в скрипте. Но что делать, если данные хранятся где-нибудь в базе или в другом месте? Тогда без дополнительного запроса на сервер не обойтись. Тогда нужно написать отдельный скрипт на PHP, который будет возвращать нужные данные, и делать к нему отдельный запрос без перезагрузки страницы.
Делается это при помощи технологии AJAX.
А мы рассмотрим «утилиту» для создания AJAX приложений — JsHttpRequest.
Подробную информацию, а также исходные коды можно найти на странице
http://dklab.ru/lib/JsHttpRequest/
Жмите «Скачать исходные коды». Из скачанного архива нам понадобятся два файла: JsHttpRequest.js и JsHttpRequest.php. Как нетрудно догадаться, первый подключается к странице, откуда будет производиться запрос, а второй — к PHP-скрипту.
Прежде чем начать, рассмотрим принцип действия. В странице, с которой идет запрос, нужно написать функцию на Javascript (предварительно подключив скачанную билиотеку). Эта функция как раз и будет посылать запрос на сервер и получать результат.
Эта функция будет вызываться при помощи события onchange тега select.
Схема такая: при изменении варианта в select срабатывает функция, посылает запрос на сервер, при этом в запросе передается то, что выбрано в select`e. PHP-скрипт на сервере, в зависимости от того, что было выбрано, подготавливает необходимый HTML-код другого select`a (да и не только select`a, а вообще, всего, что угодно), возвращает подготовленный HTML-код, и наша функция выведет этот код в нужное место.
Что за «нужное место»? Все просто. На своей странице мы вставляем тег <div> с идентификатором, например, "result", в то место, где должен появиться второй select, а в функции указываем этот самый идентификатор.
Теперь перейдем от слов к делу. Напишем пример сценария выбора сотового оператора в зависимости от страны.
Пишем страницу select.php
<script src="JsHttpRequest.js"></script>
<!-- Здесь мы подключили библиотеку. А теперь пишем функцию, которую назовем doload() -->
<script>
function doload(value){
var req=new JsHttpRequest();
req.onreadystatechange=function(){
if(req.readyState==4) document.getElementById("result").innerHTML=req.responseText;}
req.open(null,"select2.php",true);
req.send({country:value});}
</script>
<!-- Нетрудно догадаться, что мы сделали. Смотрите: ниже мы объявим тег select, в котором пропишем вызов функции doload с параметром this.value, то есть с выбранным в select`e значением. А вышенаписанная функция посылает запрос в скрипт select2.php и передаст ему значение country=value. Затем результат выведет в элемент с id=result. Итак, поехали... -->
<!-- Создаем форму -->
<form action="sript.php" method="POST">
<!-- Теперь пихаем в нее первый select -->
<select name="country" onchange="doload(this.value);">
<option value="no" selected>Выберите страну...
</option>
<option value="russia">Россия
</option>
<option value="ukraine">Украина
</option>
</select>
<br><br>
<!-- Вставляем тэг с нашим идентификатором, вместо которого у нас будет появляться второй select -->
<div id="result"></div>
<br><br>
<!-- Теперь вставляем кнопку и закрываем форму. -->
<input type="submit" value="Отправить">
</form>
Все. Готово. Теперь, если открыть эту страницу и повыбирать разные значения в select`e, то... конечно же, получим ошибку, потому что у нас нет скрипта select2.php, в который мы передаем данные. Чтож, займемся его созданием.
<?
require("JsHttpRequest.php");
//Подключаем библиотеку
$JsHttpRequest=
new JsHttpRequest
("windows-1251");
//Создаем экземпляр класса, указываю рабочую кодировку.
//Далее все просто. В зависимости от выбранного параметра в первом select`e, заполняем переменную $html необходимым кодом.
switch($_REQUEST["country"]):
//Поехали...
case "russia":
$html=
"<select name=\"provider\">
<option>МТС</option>
<option>Билайн</option>
<option>Мегафон</option>
</select>";
break;
// С Россией разобрались. Переходим к Украине
case "ukraine":
$html=
"<select name=\"provider\">
<option>KievGSM</option>
<option>UKRGSM</option>
</select>";
break;
//С Украиной тоже разобрались. Далее можно понапихать еще чего-нибудь (не забывая редактировать первый select в первом файле). Но мы пока закончим на этом.
default:
$html=
null;
endswitch;
//В общем-то, все. Теперь просто выводим переменную $html, которую успешно "поймает" наша функция doload().
echo $html;
?>
Вот теперь готово.
Как видите, HTMl-код второго select`a мы забиваем непосредственно в программу. Естественно, такое поведение не является обязательным. Ничего не мешает брать данные, например, из базы и подставлять их в нужное место. Я не буду расписывать, как это делается, так как эта тема выходит за рамки данной статьи.
Так же я не буду расписывать, как навести «марафет». Например, как грамотно расположить элементы, чтобы ничего не разъезжалось и т.д. (по той же причине).
Надеюсь, что статью писал не зря и она Вам поможет.
Успехов!
Автор статьи: Байдюк Захар
Автор библиотеки JsHttpRequest: Котеров Дмитрий
