AJAX+Prototype的联动菜单
客户端代码 select.html<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript">
function sel(str){
if(str==0)return false;
var options = {
method:"get",
asynchronous:true,
parameters:"id="+str,
onSuccess:function(transport,json){
var doc = transport.responseText;
var list = doc.split("|");
$("class").options.length = 1;
for(var i=0;i<list.length-1;i++){
var temp = list.strip().split(",");
$("class").add(new Option(temp,temp));
}
},
onFailure:function(transport,json){
alert("调试失败");
}
}
new Ajax.Request("ajax.php",options);
}
</script>
<head>
<body>
<select id="type" onchange="javascript:sel(this.value);">
<option value="0">请选择</option>
<option value="1">公司</option>
<option value="2">电话</option>
<option value="3">传真</option>
</select>
<select id="class">
<option value="0">请选择</option>
</select>
</body>
</html>
服务端代码 ajax.php
<?php
header('Content-Type:text/html;charset=GB2312');
header("expires:mon,26jul199705:00:00gmt");
header("cache-control:no-cache,must-revalidate");
header("pragma:no-cache");
$id = $_GET['id'];
switch ($id){
case 1;
print "1,1号公司|2,2号公司|3,3号公司|";
break;
case 2;
print "1,1号电话|2,2号电话|3,3号电话|";
break;
case 3;
print "1,1号传真|2,2号传真|3,3号传真|";
break;
}
?>
演示地址:http://www.lueying.cn/index/select.php
3级联动
3级联动
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript">
function sel(idname,str,act){
if(str==0)return false;
var options = {
method:"get",
asynchronous:true,
parameters:act+"="+str,
onSuccess:function(transport,json){
var doc = transport.responseText;
var list = doc.split("|");
$(idname).options.length = 1;
for(var i=0;i<list.length-1;i++){
var temp = list.strip().split(",");
$(idname).add(new Option(temp,temp));
}
},
onFailure:function(transport,json){
alert("调试失败");
}
}
new Ajax.Request("ajax.php",options);
}
</script>
<head>
<body>
<select id="type" onchange="javascript:sel('class',this.value,'id');">
<option value="0">请选择</option>
<option value="1">公司</option>
<option value="2">电话</option>
<option value="3">传真</option>
</select>
<select id="class" onchange="javascript:sel('three',this.value,'pid');">
<option value="0">请选择</option>
</select>
<select id="three">
<option value="0">请选择</option>
</select>
</body>
</html>
<?php
header('Content-Type:text/html;charset=GB2312');
header("expires:mon,26jul199705:00:00gmt");
header("cache-control:no-cache,must-revalidate");
header("pragma:no-cache");
if(isset($_GET['id'])){
switch ($_GET['id']){
case 1;
print "1,1号公司|2,2号公司|3,3号公司|";
break;
case 2;
print "1,1号电话|2,2号电话|3,3号电话|";
break;
case 3;
print "1,1号传真|2,2号传真|3,3号传真|";
break;
}
}
if(isset($_GET['pid'])){
switch ($_GET['pid']){
case 1;
print "1,11号公司|2,22号公司|3,33号公司|";
break;
case 2;
print "1,11号电话|2,22号电话|3,33号电话|";
break;
case 3;
print "1,11号传真|2,22号传真|3,33号传真|";
break;
}
}
?>
页:
[1]