我做的2级联动下拉框

这是我实现得联动下拉框实现了省级以及地区得联动

页面前台代码:

<%@ Page language="c#" Codebehind="DataBind.aspx.cs" AutoEventWireup="false"

Inherits="LinkageList.DataBind" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>WebForm1</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
  <script type="text/javascript" language="javascript">
   var xmlHttp;//声明全局得XmlHttpRequest对象
   var

provinceID=0;//省份ID
   function createXmlHttp()
   {

  if(window.ActiveXObject)//判断浏览器是否IE
    {

xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}

   else if(window.XMLHttpRequest)
    {

   xmlHttp=new XMLHttpRequest();
    }

}

   //接收界面上选中得省份编号

function startRequest(slcprovinceID)
{

createXmlHttp();
provinceID=slcprovinceID;//传递给全局变量

xmlHttp.onreadystatechange=readyStateHandler;
xmlHttp.open

("POST",createQueryString(provinceID),true);
xmlHttp.send(null);

}

   //异步读取数据
   function

readyStateHandler()
{
//清空城市下

拉框
clearCityList();
if

(xmlHttp.readyState==4)
{
if

(xmlHttp.status==200)
{

//改变城市下拉框
changeCity(provinceID);

   }
    }
   }

   function changeCity(provinceID)
   {

clearCityList();
//接收服务器异步回送得XmlDocument对象

var xmlDoc=xmlHttp.responseXML;
var

cityIDs=xmlDoc.getElementsByTagName("AreaID");
var

citys=xmlDoc.getElementsByTagName("Name");

for(var i=0;i<citys.length;i++)
{
var

cityID=cityIDs[i].firstChild.nodeValue;
var city=citys

[i].firstChild.nodeValue;
var cityOption=new Option(city,cityID);

document.forms

[0].ddlCity.options.add(cityOption);
}

document.forms[0].ddlCity.options[0].selected=true;
}

   function clearCityList()

{
var myOptions=document.forms[0].ddlCity.options;

for(var i=0;i<myOptions.length;i++)

{
document.forms[0].ddlCity.options[i]=null;

}
   }

   function

createQueryString(provinceID)
{
var

queryString="http://localhost/LinkageList/ReadCity.aspx?"+"provinceID="+provinceID;

return queryString;
   }
  </script>
  <form id="Form1" method="post" runat="server">
   <asp:Label Runat="server" ID="lblProvince">省份</asp:Label>
   <asp:DropDownList Runat="server" ID="ddlProvince"></asp:DropDownList>
   <asp:Label Runat="server" ID="lblCity">城市</asp:Label>
   <asp:DropDownList Runat="server" ID="ddlCity"></asp:DropDownList>
  </form>
</body>
</HTML>

页面后台代码：

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

namespace LinkageList
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class DataBind : System.Web.UI.Page
{
  protected System.Web.UI.WebControls.Label lblProvince;
  protected System.Web.UI.WebControls.DropDownList ddlProvince;
  protected System.Web.UI.WebControls.Label lblCity;
  protected System.Web.UI.WebControls.DropDownList ddlCity;

  private void Page_Load(object sender, System.EventArgs e)
  {
   if(!this.IsPostBack)
   {
    this.BindDropDownList();
    this.ddlProvince.Attributes.Add("onchange","startRequest(this.options[this.selectedIndex].value)");
   }
   else
   {
    this.ddlProvince.Attributes.Add("onchange","startRequest(this.options[this.selectedIndex].value)");
   }
  }

  private void BindDropDownList()
  {
   SqlConnection con=new SqlConnection("server=127.0.0.1;uid=sa;pwd=;database=Address");
   SqlCommand com=con.CreateCommand();
   com.CommandText="select * from area where ParentID=0";

SqlDataAdapter adpt=new SqlDataAdapter();
adpt.SelectCommand=com;

DataSet ds=new DataSet();

   con.Open();
   try
   {
    adpt.Fill(ds);
   }
   catch(Exception ex)
   {

   }
   finally
   {
    con.Close();
   }

   this.ddlProvince.DataSource=ds;
   this.ddlProvince.DataMember=ds.Tables[0].TableName;
   this.ddlProvince.DataTextField="Name";
   this.ddlProvince.DataValueField="AreaID";
   this.ddlProvince.DataBind();
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }

  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}

服务器端被异步请求得页面前台没有任何代码只有后台得代码:

namespace LinkageList
{
/// <summary>
/// ReadCity 的摘要说明。
/// </summary>
public class ReadCity : System.Web.UI.Page
{
  private void Page_Load(object sender, System.EventArgs e)
  {
   int provinceID=Convert.ToInt32(this.Request["provinceID"].ToString());
   this.Response.ContentType="text/xml";
   this.WriteXmlDoc(provinceID);
  }

  private void WriteXmlDoc(int provinceID)
  {
   SqlConnection con=new SqlConnection("server=127.0.0.1;uid=sa;pwd=;database=Address");
   SqlCommand com=con.CreateCommand();
   com.CommandText="select * from area where ParentID="+provinceID+"";

SqlDataAdapter adpt=new SqlDataAdapter();
adpt.SelectCommand=com;

DataSet ds=new DataSet();

   con.Open();
   try
   {
    adpt.Fill(ds);
   }
   catch(Exception ex)
   {

   }
   finally
   {
    con.Close();
   }

   ds.WriteXml(this.Response.OutputStream);
   this.Response.End();
  }

}
#endregion
}
}

数据库脚本如下：

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Area]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)
drop table [dbo].[Area]
GO

CREATE TABLE [dbo].[Area] (
[AreaID] [int] IDENTITY (1, 1) NOT NULL ,
[Name] [nvarchar] (20) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[ParentID] [int] NULL
) ON [PRIMARY]
GO

数据库文件可以加我QQ索要

秒客网

我做的2级联动下拉框

相关文章