asp.net js三级联动菜单实现方法

asp教程.net js三级联动菜单实现方法

在ie5.5, ie8, firefox 2.0.0.12, chrome 8.0.552.237下可用
ashx中，通过传入的参数从数据库教程中获取相应的值。

参数名：

type：值为regiontwo（表示获取二级地区），或regionthree（表示获取三级地区），

oneid，表示一级地区编号，

twoid，表示二级地区编号

其中getregiontwoinfo和getregionthreeinfo为获取二级和三级地区编号及名称的方法
public void processrequest (httpcontext context)
{
    string type = context.request.querystring["type"];
    if (type.equals("regiontwo"))
    {
        string oneid = context.request.querystring["oneid"];
        context.response.contenttype = "text/plain";
        context.response.write(getregiontwoinfo(oneid));
    }
    else if (type.equals("regionthree"))
    {
        string oneid = context.request.querystring["oneid"];
        string twoid = context.request.querystring["twoid"];
        context.response.contenttype = "text/plain";
        context.response.write(getregionthreeinfo(oneid, twoid));   
    }
}
js代码

创建xmlhttprequest对象并发送请求，并设置onreadystatechange函数。

var http_request = false;
function send_request(url,content,callback)
{
  if(window.xmlhttprequest)
  {
    http_request=new xmlhttprequest();
    if(http_request.overridemimetype)
    {
      http_request.overridemimetype("text/xml");
    }
  }
  else
  {
    try
    {
      http_request=new activexobject("msxml2.xmlhttp");
    }
    catch(e)
    {
      try
      {
        http_request=new activexobject("microsoft.xmlhttp");
      }
      catch(e)
      {
      }
    }
  }
   
  if(!http_request)
  {
    window.alert("不能创建xmlhttprequest对象实例。");
    return false;
  }
 
  if(navigator.useragent.indexof("firefox")<0)
    http_request.onreadystatechange=callback;
  http_request.open("get",url,false);
  http_request.setrequestheader("content-type", "text/xml");
  http_request.send(content);
   
  if(navigator.useragent.indexof("firefox")>=0)
  {
    if(callback==1)
      http_request.onreadystatechange=populateclass1();
    else if(callback==2)
      http_request.onreadystatechange=populateclass2();
  }
}
初始化下拉框，并调用send_request方法。这两个函数为下拉框直接调用
function getregiontwo(oneid)
{
  if(oneid!='0')
  {
    document.getelementbyid("region_selregionthree").options.length=1;
    var url="controls/getregionhandler.ashx?type=regiontwo&oneid="+oneid;
   
    if(navigator.useragent.indexof("firefox")<0)
        send_request(url,null,populateclass1);
    else
        send_request(url,null,1);
  }
  else
  {
    document.getelementbyid("region_selregiontwo").length=1;
    document.getelementbyid("region_selregiontwo").selectedindex=0;
    document.getelementbyid("region_selregionthree").length=1;
    document.getelementbyid("region_selregionthree").selectedindex=0;
  }
}

function getregionthree(oneid,twoid)
{
  if(oneid!='0'&&twoid!='0')
  {
    var url="controls/getregionhandler.ashx?type=regionthree&oneid="+oneid+"&twoid="+twoid;
    if(navigator.useragent.indexof("firefox")<0)
        send_request(url,null,populateclass2);
    else
        send_request(url,null,2);
  }
  else
  {
    document.getelementbyid("region_selregionthree").length=1;
    document.getelementbyid("region_selregiontwo").selectedindex=0;
  }
}

function populateclass1()
{
  var f=document.getelementbyid("region_selregiontwo");
  if(http_request.readystate==4)
  {
    if(http_request.status==200)
    {
      var list=http_request.responsetext;
      f.options.length=1;
      f.options.selectedindex=0;
      document.getelementbyid("region_selregionthree").options.length=1;
      document.getelementbyid("region_selregionthree").options.selectedindex=0;
      if(list!="")
      {
        var classlist=list.split("|");
 for(var i=0;i  {
   var tmp=classlist[i].split(",");
   f.options.add(new option(tmp[1],tmp[0]));
 }
      }
    }
    else
    {
      alert("您所请求的页面有异常。");
    }
  }
}

function populateclass2()
{
  var f=document.getelementbyid("region_selregionthree");
  if(http_request.readystate==4)
  {
    if(http_request.status==200)
    {
      var list=http_request.responsetext;
      f.options.length=1;
      f.options.selectedindex=0;
      if(list!="")
      {
        var classlist=list.split("|");
        for(var i=0;i         {
          var tmp=classlist[i].split(",");
          f.options.add(new option(tmp[1],tmp[0]));
        }
      }
    }
    else
    {
      alert("您所请求的页面有异常。");
    }
  }
}

hidden输入框用于获取地区名称。

要在page_load事件中获取一级地区编号及名称，并填充下拉框。此处没有列出
<%@ control language="c#" autoeventwireup="true" codefile="region.ascx.cs" inherits="controls_region" %>

 
    --请选择地区--
 



 
    --请选择地区--
 



 
    --请选择地区--
 

html页面调用

function postregionselect()
{
  document.getelementbyid("region_txtregionone").value=document.getelementbyid("region_selregionone").options[document.getelementbyid("region_selregionone").selectedindex].text;  
  document.getelementbyid("region_txtregiontwo").value=document.getelementbyid("region_selregiontwo").options[document.getelementbyid("region_selregiontwo").selectedindex].text;
  document.getelementbyid("region_txtregionthree").value=document.getelementbyid("region_selregionthree").options[document.getelementbyid("region_selregionthree").selectedindex].text;
}

服务器端获取各级地区编号及名称：

convert.toint32(((htmlselect)region.findcontrol("selregionone")).value)
convert.toint32(request.form["ctl00$region$selregiontwo"])
convert.toint32(request.form["ctl00$region$selregionthree"])
((htmlinputhidden)region.findcontrol("txtregionone")).value
((htmlinputhidden)region.findcontrol("txtregiontwo")).value
((htmlinputhidden)region.findcontrol("txtregionthree")).value