引入:在网页中,我们经常会使用的到两个或者两个以上的下拉框的联动,即当一个从动Dropdrownlist控件的内容会随着主动Dropdownlist空间内容的改变而改变。如图:
当我们选中吉林省时对应的省内各市显示出来。这里我们以省市为了列子,首先建立两个数据库,省,和市对应省编号的数据库如下图。
省 表
地市 表
前端web页面代码:
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="dddd.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList><asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList> </div> </form> </body> </html>
后台代码:WebForm1.aspx.cs
using System; using System.Collections.Generic; using System.Configuration; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data; namespace dddd { public partial class WebForm1 : System.Web.UI.Page { DataTable db1 = new DataTable(); string strsql = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Database1.mdf;Integrated Security=True"; protected void Page_Load(object sender, EventArgs e) { DataTable db = new DataTable(); if (!this.IsPostBack) { using (SqlConnection con = new SqlConnection(strsql)) { string str = "select * from city"; using (SqlCommand cmd=new SqlCommand(str, con)) { using (SqlDataAdapter adpter = new SqlDataAdapter(cmd)) { adpter.Fill(db); } } } this.DropDownList1.DataSource = db; this.DropDownList1.DataTextField = "proName"; this.DropDownList1.DataValueField = "proID"; this.DropDownList1.DataBind(); string cmdText = "select * from province where proID=@proID"; using (SqlCommand cmdQc = new SqlCommand(cmdText, new SqlConnection(strsql))) { SqlParameter par = new SqlParameter("@proID", this.DropDownList1.SelectedValue); cmdQc.Parameters.Add(par); using (SqlDataAdapter adpter=new SqlDataAdapter(cmdQc)) { adpter.Fill(db1); } } this.DropDownList2.DataSource = db1; this.DropDownList2.DataTextField = "cityName"; this.DropDownList2.DataValueField = "cityID"; this.DropDownList2.DataBind(); } } protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { DataTable db2 = new DataTable(); string sqlstr = "select * from province where proID=@proID"; using (SqlConnection con = new SqlConnection(strsql)) { using (SqlCommand cmd = new SqlCommand(sqlstr, con)) { SqlParameter par = new SqlParameter("@proID", DropDownList1.SelectedValue); cmd.Parameters.Add(par); using (SqlDataAdapter adpter = new SqlDataAdapter(cmd)) { adpter.Fill(db2); } } } this.DropDownList2.DataSource = db2; this.DropDownList2.DataTextField = "cityName"; this.DropDownList2.DataValueField = "cityID"; this.DropDownList2.DataBind(); } } }
配置文件 webconfig
总结:
当我们更改第一个下拉框中的内容后,会触发第一个文本框的SelectedIndexChanged事件。将第一个下拉框的proID(省的ID)作为参数,即可查到其市的内容。
代码:点击打开链接