三级联动

这是以前使用js+ashx的地区三级联动代码，参考了网上的一些资料。

经测试，在ie5.5, ie8, firefox 2.0.0.12, Chrome 8.0.552.237下可用。

1. ashx中，通过传入的参数从数据库中获取相应的值。

参数名：

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

oneid，表示一级地区编号，

twoid，表示二级地区编号

其中getregiontwoinfo和getregionthreeinfo为获取二级和三级地区编号及名称的方法。

返回类型为string，格式为编号1,名称1|编号2,名称2|...

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));    
    }
}

2. 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<classList.length;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<classList.length;i++)
        {
          var tmp=classList[i].split(",");
          f.options.add(new Option(tmp[1],tmp[0]));
        }
      }
    }
    else
    {
      alert("您所请求的页面有异常。");
    }
  }
}

3. 用户控件Region.ascx源码

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

要在Page_Load事件中获取一级地区编号及名称，并填充下拉框。此处没有列出。

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Region.ascx.cs" Inherits="Controls_Region" %>
<select id="selregionone" style="width: 121px" runat="server" οnchange="getregiontwo(this.value)">
  <option value="0">
    --请选择地区--
  </option>
</select>
<input id="txtregionone" type="hidden" runat="server"/>
<select id="selregiontwo" runat="server" οnchange="getregionthree(document.getElementById('Region_selregionone').options[document.getElementById('Region_selregionone').selectedIndex].value,this.value)">
  <option value="0">
    --请选择地区--
  </option>
</select>
<input id="txtregiontwo" type="hidden" runat="server"/>
<select id="selregionthree" runat="server" >
  <option value="0">
    --请选择地区--
  </option>
</select>
<input id="txtregionthree" type="hidden" runat="server"/>

4. html页面调用

在服务器端获取地区名称前先运行以下js代码，为hidden输入框赋值。

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

转载于:https://www.cnblogs.com/xiufei/archive/2011/03/04/1968231.html