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

作者：袖梨 2022-06-25

在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("您所请求的页面有异常。");
    }
}
}

用户控件region.ascx源码

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

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

相关文章

精彩推荐