asp.net无刷新三级联动
无刷新三级联动,这个在网上有很多,方法也很好。但是有一点比较特别的就是我的这个,是因为单位已经建立好了数据库,你得在这个上面进行添加。所以很麻烦啊。在网上也找了一些,可是大多数数据库都不一样,有一些是用vs2005和ajaxpro做的,可是我单位使用的是vs2003没有法子,只能找一些可以用了。这里要感谢的是 Eric 它在baidu的BLOG里的方法不错,我基本是采用它的方法来做的,只不过这里做了一些改动。
首先是。ThreeDDL.aspx页面,我把程序全写上来,
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">
<!--
function SelectProvince()
{
var drp2=document.getElementById("DropDownList2");//市县一级
var drp3=document.getElementById("DropDownList3");//区一级
for (var i=drp2.options.length;i>=0;i--)
{
drp2.remove(i);
}
for (var i=drp3.options.length;i>=0;i--)
{
drp3.remove(i);
}
var oHttpReq=new ActiveXObject("MSXML2.XMLHTTP");
var oDoc=new ActiveXObject("MSXML2.DOMDocument");
var province=document.getElementById("DropDownList1").value;
oHttpReq.open("post","selectarea.aspx?flag=1&province="+province,false);
oHttpReq.setrequestheader("content-type","application/x-www-form-urlencoded");
oHttpReq.send("");
var result=oHttpReq.responseText;
var newOption_0 = document.createElement("OPTION");
newOption_0.text = "-请选择-";
newOption_0.value = '-1';
drp2.options.add(newOption_0);
oDoc.loadXML(result);
//这里要说一下,items1和items2是你在后面程序中得到的一个xml表。对于//NewDataSet/city/name是怎么来的,你可以用alert(result);看一下就行
items1 = oDoc.selectNodes("//NewDataSet/city/name");
items2 = oDoc.selectNodes("//NewDataSet/city/sz_code");
var itemsLength=items1.length;
for(i=0;i<itemsLength;i++)
//将小类的类名和编号赋予DropDownList2
{
var newOption = document.createElement("OPTION");
newOption.text=items1[i].text;
newOption.value=items2[i].text;
drp2.options.add(newOption);
}
}
function SelectCity()
{
var drp3=document.getElementById("DropDownList3");
for (var i=drp3.options.length;i>=0;i--)
{
drp3.remove(i);
}
var oHttpReq=new ActiveXObject("MSXML2.XMLHTTP");
var oDoc=new ActiveXObject("MSXML2.DOMDocument");
var city=document.getElementById("DropDownList2").value;
oHttpReq.open("post","selectarea.aspx?flag=2&city="+city,false);
oHttpReq.setrequestheader("content-type","application/x-www-form-urlencoded");
oHttpReq.send("");
var result=oHttpReq.responseText;
var newOption_0 = document.createElement("OPTION");
newOption_0.text = "-请选择-";
newOption_0.value = '-1';
drp3.options.add(newOption_0);
oDoc.loadXML(result);
var items = oDoc.selectNodes("//NewDataSet/area");
for (var item = items.nextNode();item;item = items.nextNode())
{
var areaName = item.selectSingleNode("name").nodeTypedValue;
var areaCode = item.selectSingleNode("sz_code").nodeTypedValue;
var newOption = document.createElement("OPTION");
newOption.text = areaName;
newOption.value = areaCode;
drp3.options.add(newOption);
}
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server">
</asp:DropDownList></div>
</form>
</body>
</html>
下面是ThreeDDl.aspx.cs的代码
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection("Data Source=CG;Initial Catalog=area;User ID=sa;Password=chen123");
SqlDataAdapter da = new SqlDataAdapter("select * from area where right(sz_code,4)='0000'",conn);
DataSet ds = new DataSet();
da.Fill(ds, "Province");
this.DropDownList1.DataSource = ds.Tables["Province"];
this.DropDownList1.DataTextField = "name";
this.DropDownList1.DataValueField = "sz_code";
this.DropDownList1.DataBind();
this.DropDownList1.Attributes.Add("onchange", "SelectProvince()");
this.DropDownList2.Attributes.Add("onchange", "SelectCity()");
}
selectarea.aspx这个页面上面没有什么东西,只有在其selectarea.aspx.cs中才有代码,在下面
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
public partial class selectarea : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection("Data Source=CG;Initial Catalog=area;User ID=sa;Password=chen123");
int flag = Convert.ToInt32(Request.QueryString["flag"].ToString());
if (Request.QueryString["flag"] != null || Request.QueryString["flag"].ToString() != "")
{
switch(flag)
{
case 1:
string strprv = Request.QueryString["province"].ToString();
SqlDataAdapter da = new SqlDataAdapter("select * from area where left(sz_code,2)='" + strprv.Substring(0, 2).ToString() + "' and right(sz_code,2)='00' and right(sz_code,4)<>'0000'", conn);
DataSet ds = new DataSet();
da.Fill(ds,"city");
XmlTextWriter writerCity = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
writerCity.Formatting = Formatting.Indented;
writerCity.Indentation = 4;
writerCity.IndentChar = ' ';
ds.WriteXml(writerCity);
writerCity.Flush();
Response.End();
writerCity.Close();
break;
case 2:
string strcity = Request.QueryString["city"].ToString();
SqlDataAdapter da1 = new SqlDataAdapter("select * from area where left(sz_code,4)='" + strcity.Substring(0, 4).ToString() + "' and right(sz_code,2)<>'00'", conn);
DataSet ds1 = new DataSet();
da1.Fill(ds1, "area");
XmlTextWriter writerCity1 = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
writerCity1.Formatting = Formatting.Indented;
writerCity1.Indentation = 4;
writerCity1.IndentChar = ' ';
ds1.WriteXml(writerCity1);
writerCity1.Flush();
Response.End();
writerCity1.Close();
break;
}
}
}
}
这里我把数据库的大概情况给大家发一下,如果想要数据库ftp://down:down@ftp.netc.hutc.zj.cn/city.rar这个是Eric朋友提供的下载我不知道能用多长时间,我单位的数据库与它差不多,因为我无法提供我的数据库,所以以上代码全是根据它的数据库格式写的。
表名area
id name Rome sz_code zm_code
1 北京 Beijing Shi 110000 BJ
这里说一下,省一级的包括北京,天津这样的独立的市,sz_code全是前二位有数,后四位全是0000
而下面一级的,市县一级的则是前二位与省级一样,中间二位不同,后二位是00
而最后一级,区一级的,前二位与省级一样,中间与市级一样,最后二位是自己的号。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述