|
AJAX实现二级级联菜单,用PHP完成
客户端代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <script type="text/javascript"> var xmlHttp; var a =new Array(); function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } } function send_request(){ createXMLHttpRequest(); var year = document.getElementById("year"); var url = "check_2.php?page="+escape(year.value); xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange = checkit; xmlHttp.send(null); } function checkit(){ if(xmlHttp.readystate == 4){ if(xmlHttp.status == 200){ showChild(); } } } function showChild(){ var xmlDoc=xmlHttp.responseXML; var content=xmlDoc.getElementsByTagName("city"); for(var i=0;i<content.length;i++){ var y=content[i]; a[i]=y.childNodes[0].data; } show1(); } function show1(){ var obj=document.getElementById("name"); var number=obj.length; for(var j=obj.length-1;j>=0;j--){ obj.removeChild(obj.childNodes.item(j)); } for(var i=0;i<a.length;i++){ var opt=document.createElement("OPTION"); opt.text=a[i]; obj.add(opt); } } </script> <body> 年份:<select id="year" onchange="send_request()"> <option value="0">请选择</option> <option value="1">1996-2006</option> <option value="2">1986-1995</option> <option value="3">1971-1985</option> <option value="4">1970以前</option> </select> 子目录:<select id="name"> <option value="0">请选择</option> </select> </body> </html> 服务器端代码: 复制代码 代码如下: <?php header('Content-type: text/xml'); $xml="<?xml version='1.0' encoding='GB2312'?>"; $year = $_GET["page"]; $content = $xml."<contents>"; if($year == "1"){ $content = $content."<city>1</city><city>11</city></contents>"; } else if($year == '2'){ $content = $content."<city>2</city><city>12</city></contents>"; } else if($year == '3'){ $content = $content."<city>3</city><city>13</city></contents>"; } else if($year == '4'){ $content = $content."<city>4</city><city>14</city></contents>"; } echo $content; ?>
|
|