asp.net无刷新三级联动
2011-10-12 11:24
330 查看
无刷新三级联动，这个在网上有很多，方法也很好。但是有一点比较特别的就是我的这个，是因为单位已经建立好了数据库，你得在这个上面进行添加。所以很麻烦啊。在网上也找了一些，可是大多数数据库都不一样，有一些是用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
而最后一级，区一级的，前二位与省级一样，中间与市级一样，最后二位是自己的号。
// if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = true;
var cb_blogId = 22787;
var cb_entryId = 1029165;
var cb_blogApp = "ejiyuan";
var cb_blogUserGuid = "3d65360b-63cf-dd11-9e4d-001cf0cd104b";
var cb_entryCreatedDate = '2008/1/7 16:15:00';
// ]]>
首先是。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
而最后一级，区一级的，前二位与省级一样，中间与市级一样，最后二位是自己的号。
// if ($ != jQuery) {
$ = jQuery.noConflict();
}
var isLogined = true;
var cb_blogId = 22787;
var cb_entryId = 1029165;
var cb_blogApp = "ejiyuan";
var cb_blogUserGuid = "3d65360b-63cf-dd11-9e4d-001cf0cd104b";
var cb_entryCreatedDate = '2008/1/7 16:15:00';
// ]]>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- asp.net无刷新三级联动
- asp.net实现DropDownList、ListBox无刷新三级联动的两种方法
- asp.net实现DropDownList、ListBox无刷新三级联动的两种方法
- asp.net实现ListBox、DropDownList无刷新三级联动(xmlhttp)
- asp.net 有刷新实现三级联动
- asp.net无刷新三级联动
- asp.net无刷新三级联动
- asp.net实现ListBox、DropDownList无刷新三级联动(xmlhttp)
- asp.net+jQuery应用JSON实现无刷新三级联动实例（转）
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- asp.net实现DropDownList、ListBox无刷新三级联动的方法
- asp.net 有刷新实现三级联动
- asp.net实现DropDownList、ListBox无刷新三级联动(javascript)
- Ajax无刷新技术实现省市县三级联动下拉菜单--Asp.Net
- 对asp.net实现DropDownList、ListBox无刷新三级联动(javascript)的改进
- 对asp.net实现DropDownList、ListBox无刷新三级联动(javascript)修改
- asp.net实现DropDownList、ListBox无刷新三级联动(javascript)
- ajax.net +jquery 无刷新三级联动的实例代码
- ASP.NET无刷新二级联动下拉列表
- ASP.net DropDownList 无刷新联动菜单