三级联动
这是以前使用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" onchange="getregiontwo(this.value)"> <option value="0"> --请选择地区-- </option> </select> <input id="txtregionone" type="hidden" runat="server"/> <select id="selregiontwo" runat="server" onchange="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