<head>
<title>Связанные списки</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
fieldset{ width:10em; display:block; padding:.5em }
select{ width:10em }
</style>
< script type="text/javascript">
// Функция, осуществляющая AJAX запрос.
function loadXMLDoc(method,url){
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open(method, url, true);
req.send(null);
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = processReqChange;
req.open(method, url, true);
req.send();
}
}
// Функция, выполняемая при изменении статуса
// запроса, если статус равен 200, данные получены.
function processReqChange(){
if(req.readyState == 4){
if(req.status == 200){
getColors(req.responseXML.documentElement);
}else{
alert("There was a problem retrieving the XML data:n" + req.statusText);
}
}
}
function onChange(_this) {
var url = "ajax.php?models="+_this.value;
loadXMLDoc("get",url);
}
function getColors(xml){
var colors = xml.getElementsByTagName("color");
var _select = document.getElementById("colors");
_select.innerHTML = ""; // Удаляем всех потомков.
// Создаем список с доступными цветами.
for(i=0; i<colors.length; i++) {
var option = document.createElement("option");
var optionText = document.createTextNode(colors[i].firstChild.data);
option.appendChild(optionText);
option.setAttribute("value",colors[i].getAttribute("value"));
_select.appendChild(option);
}
}
</script>
</head>
<body>
<?PHP
// Проверка, пришли ли данные из формы.
if( isset($_GET["models"]) ){ // Как бы выборка из базы данных.
"BentleyAzure" => array("red"=>"Красный", "green"=>"Зеленый"), "ChevroletCorvette" => array("black"=>"Черный", "blue"=>"Синий"), "FerrariEnzo" => array("green"=>"Зеленый", "black"=>"Черный", "yellow"=>"Желтый") );
$colors = $colorsArray[$_GET["models"]];
// Проверка на доступность модели этого цвета.
echo '<h3 style="color:#090">Модель такого цвета есть в наличии</h3>';
}else{
echo '<h3 style="color:#900">Модель такого цвета отсутствует</h3>';
}
}
?>
<form action="list.php" method="get">
<fieldset>
<legend><label for="models">Модели</label></legend>
<select id="models" name="models" onchange="onChange(this)">
<option value="BentleyAzure" selected>Bentley Azure</option>
<option value="ChevroletCorvette">Chevrolet Corvette</option>
<option value="FerrariEnzo">Ferrari Enzo</option>
</select>
</fieldset>
<fieldset>
<legend><label for="colors">Цвета</label></legend>
<select id="colors" name="colors">
<option value="red">Красный</option>
<option value="black">Черный</option>
<option value="green">Зеленый</option>
<option value="blue">Синий</option>
<option value="yellow">Желтый</option>
</select>
</fieldset>
<fieldset>
<input type="submit" value="Выбрать" />
</fieldset>
</form>
</body>