asp.net实现DropDownList、ListBox无刷新三级联动的两种方法-控件新闻-慧都网

asp.net实现DropDownList、ListBox无刷新三级联动的两种方法

翻译|其它|编辑：郝浩|2007-09-24 10:27:29.000|阅读 2047 次

概述：

方法一：使用 javascript
　　此为 DropDownList 无刷新三级联动的另一种方法，使用 javascript 操作，因是在客户端操作，所以切换速度较快，但如果数据量大时，加载时会稍慢点，下一篇文章我会发布针对此方法的改进方案，供大家参考。此为 DropDownList 示例，ListBox 只需略加修改。

　　数据库为国家统计局最新的行政区划，自己又加入了香港、台湾、澳门的行政区划，需要的朋友可直接下载使用。
　　数据库下载/Files/netshuai/area.rar
　　aspx 页面代码
　　＜% =strAreaData %＞
　　＜script language = "JavaScript" type="text/javascript"＞
function changearea1()
{

document.all("＜% =Ddl_AreaTwo.ClientID %＞").length = 0;
document.all("＜% =Ddl_AreaTwo.ClientID %＞").options[0] = new Option('选择城市','0');
document.all("＜% =Ddl_AreaThree.ClientID %＞").length = 0;
document.all("＜% =Ddl_AreaThree.ClientID %＞").options[0] = new Option('选择城市','0');
var oneid=document.all("＜% =Ddl_AreaOne.ClientID %＞").value;
var i;
for (i=0; i ＜ onecount; i++)
{
　　　if (subcat[i][1] == oneid)
　　 {
　　　 document.all("＜% =Ddl_AreaTwo.ClientID %＞").options[document.all("＜% =Ddl_AreaTwo.ClientID %＞").length] = new Option(subcat[i][0], subcat[i][2]);
　　 }
}

}
function changearea2()
{

}
＜/script＞
＜asp:DropDownList ID="Ddl_AreaOne" runat="server" AppendDataBoundItems="True"＞
　　＜asp:ListItem Value="0"＞请选择＜/asp:ListItem＞
　　＜/asp:DropDownList＞
　　＜asp:DropDownList ID="Ddl_AreaTwo" runat="server" ＞
　　＜asp:ListItem Value="0"＞请选择＜/asp:ListItem＞
　　＜/asp:DropDownList＞
　　＜asp:DropDownList ID="Ddl_AreaThree" runat="server" ＞
　　＜asp:ListItem Value="0"＞请选择＜/asp:ListItem＞
　　＜/asp:DropDownList＞
　　cs 页面代码
　　protected string strAreaData;
protected void Page_Load(object sender, EventArgs e)
{

Ddl_AreaOne.Attributes.Add("onchange", "changearea1()");
Ddl_AreaTwo.Attributes.Add("onchange", "changearea2()");
string strSQL;
strSQL = "select * from nts_area where oneid＜＞0 and twoid=0 and threeid=0 order by sort";
Ddl_AreaOne.DataSource = DataClass.GetDataReader(strSQL);
Ddl_AreaOne.DataTextField = "areaname";
Ddl_AreaOne.DataValueField = "oneid";
Ddl_AreaOne.DataBind();
strAreaData = "＜script language = 'JavaScript' type='text/javascript'＞var onecount; onecount=0; subcat = new Array(); ";
　　strSQL = "select * from nts_area where oneid＜＞0 and twoid＜＞0 and threeid=0 order by sort";
　　OleDbDataReader dr = DataClass.GetDataReader(strSQL); //此处为我写的一个取得DataReader对象的类
　　int i1 = 0;
　　while (dr.Read())
　　{
　　　strAreaData += "subcat[" + i1.ToString() + "] = new Array('" + dr["areaname"].ToString() + "','" + dr["oneid"].ToString() + "','" + dr["twoid"].ToString() + "'); ";
　　　i1++;
　　}
　　strAreaData += "onecount=" + i1.ToString() + "; ";
　　//添加三级地区
　　strAreaData += "var onecount1; onecount1=0; subcat1 = new Array(); ";
　　strSQL = "select * from nts_area where oneid＜＞0 and twoid＜＞0 and threeid＜＞0 order by sort";
　　dr = DataClass.GetDataReader(strSQL);
　　int n1 = 0;
　　while (dr.Read())
　　{
　　　strAreaData += "subcat1[" + n1.ToString() + "] = new Array('" + dr["areaname"].ToString() + "','" + dr["oneid"].ToString() + "','" + dr["twoid"].ToString() + "','" + dr["threeid"].ToString() + "'); "; n1++;
　　}
　　dr.Close();
　　strAreaData += "onecount1=" + n1.ToString() + "; ＜/script＞";

}
　　二、使用 xmlhttp
　　最近正在做一个分类信息的程序，正做到实现无刷新三级联动的问题，从网上查了不少方法，最后使用选择了 xmlhttp 方法实现，并对代码进行了多次改进，现提供给大家参考。此为 ListBox 控件示例，DropDownList 只需将控件名改一下就可以了。
数据库结构为：
　　id 自动编号
　　oneid 数值型一级分类 id
　　twoid 数值型二级分类 id
　　threeid 数值型三级分类 id
　　sort 数值型排序
　　classname 字符型分类名称

　　数据库下载
　　/Files/netshuai/class.rar
　　aspx 页面 javascript 代码
　　＜script type="text/javascript"＞
function XmlPost(str)
{
　　var webFileUrl="";
　　document.all("＜% =Lbx_ClassThree.ClientID %＞").length=0;
　　if(str==1)
　　{
　　 webFileUrl = "?oneid=" + document.all("＜% =Lbx_ClassOne.ClientID %＞").value;
　　 document.all("＜% =Lbx_ClassTwo.ClientID %＞").length=0;
　　}
　　else
　　{
　　webFileUrl = "?oneid=" + document.all("＜% =Lbx_ClassOne.ClientID %＞").value+"&twoid="+document.all("＜% =Lbx_ClassTwo.ClientID %＞").value;
　　}
　　var result = "";
　　var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
　　xmlHttp.open("Post", webFileUrl, false);
　　xmlHttp.send("");
　　result = xmlHttp.responseText;
　　if(result != "")
　　{
　　 var piArray = result.split(",");
　　 if(str==1)
　　 {
　　   for(var i=0; i＜piArray.length; i++)
　　   {
　　      var ary1 = piArray[i].toString().split("|");
　　 document.all("＜% =Lbx_ClassTwo.ClientID %＞").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　 }
　　}
　　else
　　{
　　   for(var i=0; i＞piArray.length; i++)
　　   {
　　        var ary1 = piArray[i].toString().split("|");
　　document.all("＜% =Lbx_ClassThree.ClientID %＞").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　}
　　}
　　}
}
　　＜/script＞
　　aspx 页面控件代码
　　＜asp:ListBox ID="Lbx_ClassOne" runat="server" Height="300px" Width="150px"＞＜/asp:ListBox＞
　　＜asp:ListBox ID="Lbx_ClassTwo" runat="server" Height="300px" Width="150px"＞＜/asp:ListBox＞
　　＜asp:ListBox ID="Lbx_ClassThree" runat="server" Height="300px" Width="150px" ＞＜/asp:ListBox＞
　　cs 页面代码
　　protected void Page_Load(object sender, EventArgs e)
　　{
　　string strOneid = "", strTwoid = "";
　　if (Request["oneid"] != null && Request["oneid"].ToString() != "")
　　{
　　strOneid = Request["oneid"].ToString();
　　}
　　if (Request["twoid"] != null && Request["twoid"].ToString() != "")
　　{
　　strTwoid = Request["twoid"].ToString();
　　}
　　if (strOneid != "")
　　{
　　Lbx_Class_Bind(strOneid, strTwoid);
　　}
　　if (!this.IsPostBack)
　　{
　　Lbx_ClassOne_Bind();
　　Lbx_ClassOne.Attributes.Add("onchange", "XmlPost(1)");
　　Lbx_ClassTwo.Attributes.Add("onchange", "XmlPost(2)");
　　}
　　}
private void Lbx_ClassOne_Bind()
{
　　string strSQL;
　　strSQL = "select * from nts_infoclass where oneid＜＞0 and twoid=0 and threeid=0 order by sort";
　　Lbx_ClassOne.DataSource = DataClass.GetDataReader(strSQL); //此处为我写的一个取DataReader对象的类
　　Lbx_ClassOne.DataTextField = "classname";
　　Lbx_ClassOne.DataValueField = "oneid";
　　Lbx_ClassOne.DataBind();
　　}
private void Lbx_Class_Bind(string oneid, string twoid)
{
　　string strSQL = "",idname="";
　　if (oneid != "" && twoid == "")
　　{
　　strSQL = "select * from nts_infoclass where twoid＜＞0 and threeid=0 and oneid=" + oneid + " order by sort";
　　idname = "twoid";
　　}
　　if (oneid != "" && twoid != "")
　　{
　　strSQL = "select * from nts_infoclass where threeid＜＞0 and oneid=" + oneid + " and twoid=" + twoid + " order by sort";
　　idname = "threeid";
　　}
　　string mystr = "";
　　OleDbDataReader dr = DataClass.GetDataReader(strSQL); //此处为我写的一个取DataReader对象的类
　　while (dr.Read())
　　{
　　mystr += "," + dr[idname].ToString() + "|" + dr["classname"].ToString();
　　}
　　if (mystr != "")
　　{
　　mystr = mystr.Substring(1);
　　}
　　dr.Close();
　　this.Response.Write(mystr);
　　this.Response.End();
　　}