AJAX 二级级联菜单实现代码

  客户端代码:

  

复制代码 代码如下:

  <!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;

  ?>