ajax 三级联动

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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 runat="server">
    <title>Untitled Page</title>
      <script language="javascript" type="text/javascript">
          var request;
          var OptionsName;
          iniOptions();

          //初始化第一个列表框
          function iniOptions() {
              OptionsName = "op1";
              getNextOptions("", ""); //初始化第一个列表框
          }

          //创建求XMLHttpRequest对象
          function createRequest() {
              try {
                  request = new XMLHttpRequest();
              } catch (trymicrosoft) {
                  try {
                      request = new ActiveXObject("Msxml2.XMLHTTP");
                  } catch (othermicrosoft) {
                      try {
                          request = new ActiveXObject("Microsoft.XMLHTTP");
                      } catch (failed) {
                          request = false;
                      }
                  }
              }
              if (!request)
                  alert("error , your browerser can can create XMLHttpRequest!");
          }

          //发送请求，获取下一个列表框的列表数据
          //参数oValue为当前列表框的选中值，此值作为下一个列表框的parentID号
          function getNextOptions(oValue, rootType) {
              createRequest();
              var url = "SelectHander.aspx?parentid=" + oValue + "&rootType=" + rootType;
              request.open("GET", url, true);
              request.onreadystatechange = opcallback;
              request.send(null);
          }

          //回调函数
          function opcallback() {
              if (request.readyState == 4) {
                  if (request.status == 200) {
                      var response = request.responseText; //获取服务器返回的JSON字串
                      addOptions(response); //添加option选项
                      //document.getElementById("demo").innerHTML=response
                  } else
                      alert("status is " + request.status);
              }
          }

          //添加option选项
          function addOptions(str) {
              var jsonObj = str; // JSON字符串转JSON对象
              var opObj = document.getElementById(OptionsName);
              clearlaterOP();
              var s = jsonObj.split("|")

              if (s.length > 1) opObj.disabled = false;

              for (i = 0; i < s.length; i++) {
                  jj = s[i];
                  kk = jj.split(":");
                  var TemOption = new Option(kk[0], kk[1]); //定义一个选项对象
                  //if (i==0) TemOption.selected = "selected"; //设定第一项为被选项
                  opObj[opObj.length] = TemOption; //添加到列表
              }

}

          //清除所有当前及后继option的列表内容
          function clearlaterOP() {
              var obj = document.getElementById(OptionsName)
              var nOp = Number(obj.id.substr(obj.id.length - 1, 1));
              for (i = nOp; i <= 3; i++) {
                  var opTemp = document.getElementById("op" + i);
                  opTemp.length = 1;
              }
          }

          //option的onchange事件
          function OpSelectChange(obj, rootType) {
              obj.value = obj.options[obj.selectedIndex].value;
              OptionsName = "op" + (Number(obj.id.substr(obj.id.length - 1, 1)) + 1); //自动确定下一option的id号，为添加选项作准备
              getNextOptions(obj.value, rootType);
          }

          //查找产品
          function SearchProductByName() {
              var obj = document.getElementById("op3");
              var queryValue = obj.options[obj.selectedIndex].value;       //产品pageurl
              alert(queryValue);
              window.location.href = "\""+queryValue+"\"";
          }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
           <div id="demo">
    </div>
   <select name="op1" id="op1" onchange="OpSelectChange(this,'A')" style="100px;">
   <option>Select Catalog</option>
    </select>
    <select name="op2" id="op2" onchange="OpSelectChange(this,'B')" style="100px;" disabled="disabled">
<option>Select Subcatalog</option>
    </select>
    <select name="op3" id="op3" style="100px;" disabled="disabled">
<option>Select Product</option>
    </select>

if (Request.QueryString["parentid"] != null && Request.QueryString["rootType"]!=null)
                         {
                             string rootId=Request.QueryString["parentid"].ToString().Trim();
                             string rootType = Request.QueryString["rootType"].ToString().Trim();

                             if (rootId == ""&&rootType=="") //when loaded
                             {
                                 Response.Write("a:1|aa:2|aaa:3");
                             }
                             else if (rootId.Trim() != "" && rootType=="A") //when big catalog select
                             {
                                 Response.Write("b:1|bb:2|bb:3");
                             }
                             else if (rootId.Trim() != "" && rootType == "B") ///when sub catalog select
                             {
                                 Response.Write("c:1|cc:2|cc:3");
                             }

}