Все данные для последующего селекта аяксом запрашиваются у
скрипта getdata.
php передавая ему имя выбранного селекта и его значение. Вызов
скрипта осуществляется при смене значений у селектов с class="activeselect". Они привязываются к дочерним селектам по rel, в котором id дочернего селекта,
Таким образом можно делать сколь угодно длинные цепочки.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://yandex.st/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".activeselect").bind("change",function(){
var value = $(this).val();
var next = $(this).attr("rel");
var current = $(this).attr("id");
if(next==""){
return;
}
$("#"+next).attr("disabled","disabled");
var next_=next;
var el;
while(next_!=undefined){
$("#"+next_).attr("disabled","disabled");
$("#"+next_).empty();
el = document.createElement("option");
el.setAttribute("value", "");
el.innerHTML = "Выберите";
$("#"+next_).append(el);
next_=$("#"+next_).attr("rel");
}
if(value==""){
return;
}
$(this).attr("disabled","disabled");
$.getJSON(
"./getdata.php",
{
field:$(this).attr("name"),
value:value
},
function(data){
var el;
for(var i=0;i<data.length;i++){
el = document.createElement("option");
el.setAttribute("value", data[i].id);
el.innerHTML = data[i].name;
$("#"+next).append(el);
}
$("#"+current).attr("disabled","");
$("#"+next).attr("disabled","");
}
);
});
});
</script>
</head>
<body>
<form action="">
<select name="mark" id="select1" rel="select2" class="activeselect">
<option value="">Выберите</option>
<option value="qwefdd">qwefwef</option>
<option value="qwef">qwefwqef</option>
</select><br />
<select name="model1" id="select2" rel="select3" disabled="disabled" class="activeselect">
<option value="">Выберите</option>
</select><br />
<select name="model2" id="select3" rel="select4" disabled="disabled" class="activeselect">
<option value="">Выберите</option>
</select><br />
<select name="model3" id="select4" rel="select5" disabled="disabled" class="activeselect">
<option value="">Выберите</option>
</select><br />
<select name="model4" id="select5" disabled="disabled">
<option value="">Выберите</option>
</select>
</form>
</body>
</html>
Для примера getdata.
php, который формирует случайные значения для селектов - чтобы показать как
работает
<?php
$out=array();
$max=mt_rand(5,20);
for($i=0;$i<$max;$i++){
$out[]=array(
'id'=>mt_rand(2000,5000),
'name'=>mt_rand(1,1000)
);
}
header("Content-Type: application/x-javascript");
if(array_key_exists('jsoncallback',$_GET)){
echo $_GET['jsoncallback'];
}
echo json_encode($out);
die;