ajax 级联下拉菜单

首先新建个WEB项目，在页面上放2个DropDownList ，分别命名为menu1,menu2。
在Page_Load中写如初始化代码：

if(!Page.IsPostBack) {     //初始化下拉框     ListItem item=new ListItem("请选择","0");     menu1.Items.Add(item);     menu2.Items.Add(item);      item=new ListItem("数字","1");     menu1.Items.Add(item);      item=new ListItem("字母","2");     menu1.Items.Add(item);           menu1.Attributes.Add("onChange","getMenuItem('menu2','MenuData.aspx','id='+this.value);"); }

在页面的HTML部分添加下面的Ajax脚本：

//获得SMLHttpRequest实例,支持多浏览器 function newXMLHttpRequest() {     var xmlreq = false;     if(window.XMLHttpRequest)      {         xmlreq = new XMLHttpRequest();      }      else if (window.ActiveXObject)     {         try {         xmlreq = new         ActiveXObject("Msxml2.XMLHTTP");         }         catch (e1)         {             try {                 xmlreq = new                 ActiveXObject("Microsoft.XMLHTTP");             }             catch (e2)             { }         }     }     return xmlreq; } //主函数 //Tid为目标ID //url为获取数据的页面 //为url提供参数 function getMenuItem(Tid,url,parm) {      if(url == "")      { return; }      var req = newXMLHttpRequest();      // 设置用来从请求对象接收回调通知的句柄函数      var handlerFunction = getReadyStateHandler(req,Tid);      req.onreadystatechange = handlerFunction;      //第三个参数表示请求是异步的      req.open("POST", url, true);      // 指示请求体包含form数据      req.setRequestHeader("Content-Type",      "application/x-www-form-urlencoded");      // 发送参数      req.send(parm); } function getReadyStateHandler(req,Tid) {      // 返回一个监听XMLHttpRequest实例的匿名函数      return function (){      // 如果请求的状态是“完成”      if (req.readyState == 4)      {          // 成功接收了服务器响应          if (req.status == 200)          {              //这里显示了返回信息的内容部分，也可以加以修改。进行其它处理              UpdateList(req,Tid);          }          else          {               //有错误发生               alert("HTTP error: "+req.status);          }      }      } }

接着是处理返回数据的脚本：

function UpdateList(req,Tid) {      //获取目标控件      var select=document.getElementById(Tid);      while(select.hasChildNodes())      {          var old=select.firstChild;          select.removeChild(old);      }      var element=document.createElement("option");      var txt=document.createTextNode("请选择");      element.appendChild(txt);      select.appendChild(element);      //获取返回的XML数据中MenuItem节点集合      var options=req.responseXML.getElementsByTagName("MenuItem");      //将获取的数据添加到目标控件      for(var i=0;i<options.length;i++)      {          select.appendChild(CreateOption(options[i]));      } } function CreateOption(val) {      var element=document.createElement("option");      element.setAttribute("value",val.getAttribute("id"));      var txt=document.createTextNode(val.firstChild.nodeValue);      element.appendChild(txt);      return element; }

准备就绪，只差返回数据的页面了。接着新建WEB窗体，命名为MenuData.aspx，
在Page_Load中写入下面的代码：

Response.ContentType="text/xml"; Response.Write("<Menus>"); if(int.Parse(Request["id"].ToString())==1) {     Response.Write("<MenuItem id=/"1111/">11111</MenuItem>");      Response.Write("<MenuItem id=/"2222/">22222</MenuItem>");      Response.Write("<MenuItem id=/"3333/">33333</MenuItem>");      Response.Write("<MenuItem id=/"4444/">44444</MenuItem>");      Response.Write("<MenuItem id=/"5555/">55555</MenuItem>"); } else if(int.Parse(Request["id"].ToString())==2) {     Response.Write("<MenuItem id=/"aaaa/">aaaaa</MenuItem>");     Response.Write("<MenuItem id=/"bbbb/">bbbbb</MenuItem>");     Response.Write("<MenuItem id=/"cccc/">ccccc</MenuItem>");     Response.Write("<MenuItem id=/"dddd/">ddddd</MenuItem>");     Response.Write("<MenuItem id=/"eeee/">eeeee</MenuItem>"); } Response.Write("</Menus>"); Response.End();

 

现在运行该测试项目即可看到效果。
MenuData.aspx只是为了测试，所以写得很简单。
实际应用中数据是从数据库中取得，但需要处理成XML格式