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

原创 2007年09月23日 22:47:00
来源:netshuai博客园
  方法一:使用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()
{
document.all("<% =Ddl_AreaThree.ClientID %>").length = 0;
document.all("<% =Ddl_AreaThree.ClientID %>").options[0] = new Option('选择城市','0');
var twoid=document.all("<% =Ddl_AreaTwo.ClientID %>").value;
var oneid=document.all("<% =Ddl_AreaOne.ClientID %>").value;
var i;
  for (i=0; i < onecount1; i++)
  {
  if (subcat1[i][2] == twoid)
  {
  if (subcat1[i][1] == oneid)
  {
  document.all("<% =Ddl_AreaThree.ClientID %>").options[document.all("<% =Ddl_AreaThree.ClientID %>").length] = new Option(subcat1[i][0], subcat1[i][3]);
  }
  }
  }
}
</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();
  } 

两种添加数据到dropdownlist控件的方法_asp.net技巧

给dropdownlist添加数据

Asp.net—DropDownList与listbox的联动

在实际的项目中,会有这样的需求,比如在dropdownlist绑定了数据库以后,选择相应的内容,在listbox中就会显示对应内容下的具体条目。比如:在dropdownlist中绑定数据库中所有的省,...

《ASP.NET》数据绑定—DropDownList、ListBox

DropDownList和ListBox实现两级联动功能,他们也可以将从后台数据库中搜选的出来的信息加以绑定,这里要实现的功能是在DropDownList中选择“省”,然后让ListBox自动将其省份...

Asp.net MVC3 关于@Html中ListBox、DropDownList使用

ListBox,DropDownList都是通过使用指定的 HTML 帮助器和窗体字段的名称,返回单选select 元素。 同属于SelectExtensions 类 1、@Html.ListBo...
  • pasic
  • pasic
  • 2011年12月25日 22:47
  • 23005

Asp.net MVC3 关于@Html中ListBox、DropDownList使用

ListBox,DropDownList都是通过使用指定的 HTML 帮助器和窗体字段的名称,返回单选select 元素。 同属于SelectExtensions 类 1、@Html.Li...

创建联动的 DropdownList in ASP.net MVC 3 and jQuery (2)

1. AjaxBindDropdownlistController.cs using System; using System.Collections.Generic; using Syst...

asp.net控件DropDownList实现级联查询

.aspx代码如下: AutoPostBack="True" DataSourceID="AccessData...

[Asp.Net]4种方法把数据绑定到Dropdownlist

第一种,把Array数组绑到dropdownlist 程序代码string[] Month =new string[7]{ "January", "February", "March", "April...

asp.net: DropDownList绑定数据源及选中某个值的公用方法及例子

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System....

asp.net中实现DetailsView控件下的两个DropDownList级连变动

http://www.cnblogs.com/dreampeng007/archive/2007/12/03/980965.html 做项目中,一直在用DetailsView控件在显示数据库表的详细数...
  • plean
  • plean
  • 2011年06月16日 17:14
  • 824
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:asp.net实现DropDownList、ListBox无刷新三级联动的两种方法
举报原因:
原因补充:

(最多只允许输入30个字)