asp.net(c#) 实现二级联动的下拉列表
打开演示
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProvince" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlProvince_SelectedIndexChanged">
</asp:DropDownList><br />
<br />
<br />
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
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.Data.OleDb;
public partial class _Default : System.Web.UI.Page
{
public static OleDbConnection createCon()
{
OleDbConnection con = new OleDbConnection("Provider = Microsoft.JET.OleDB.4.0;Data Source = |DataDirectory|mydata.mdb");
return con;
}
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
OleDbConnection conn = createCon();
conn.Open();
OleDbCommand cmd = new OleDbCommand("select * from province_city where fartherid = 0", conn);
OleDbDataReader dr = cmd.ExecuteReader();
ddlProvince.Items.Add(new ListItem("请选择省",""));
ddlCity.Items.Add(new ListItem("请选择城市", ""));
while (dr.Read())
{
ddlProvince.Items.Add(new ListItem(dr["name"].ToString(),dr["id"].ToString()));
}
dr.Close();
conn.Close();
}
}
protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlProvince.SelectedValue != "")
{
OleDbConnection conn = createCon();
conn.Open();
OleDbCommand cmd = new OleDbCommand("select * from province_city where fartherid = " + Convert.ToInt32(ddlProvince.SelectedValue), conn);
OleDbDataReader dr = cmd.ExecuteReader();
ddlCity.Items.Clear();
while (dr.Read())
{
ddlCity.Items.Add(new ListItem(dr["name"].ToString(), dr["id"].ToString()));
}
dr.Close();
conn.Close();
}
}
}
这是用javascript实现的，并且没有与数据库交互.下面我们要实现的与数据库交互的二级联动,这种联动大量运用于文章系统中的分类.
测试环境:WINXP + VS2005 + Access
这里要指出的是,网上很多实现二级联动用的是两张表,而在这里我们将完全使用一张表.先用Access建一个mydata的数据库,并保存到App_Data目录下,这样我们就可以直接用:
OleDbConnection con = new OleDbConnection("Provider = Microsoft.JET.OleDB.4.0;Data Source = |DataDirectory|mydata.mdb");
建立数据库连接.在mydata数据库中建立表province_city表,表的设计如下表所示:
具体内容如下所示:
实现二级联动的数据库设计说明:不管是省还是城市我们都给它一个唯一id,所以这里id我们设为主键,fartherid指的是它(这里指省或者城市)的父亲id,很显然只要是省它的父亲id是0.当我们从数据库中取得所有省的信息时，可以用下面的SQL语句:
select * from province_city where fartherid = 0
那么如何取得省对应的城市信息呢?我们可以用下面的SQL语句:
select * from province_city where fartherid = " + Convert.ToInt32(ddlProvince.SelectedValue)
这里的ddlProvince.SelectedValue是省下拉列表选择的值.
具体的实现代码如下所示:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>无标题页</title></head><body> <form id="form1" runat="server"> <div> <asp:DropDownList ID="ddlProvince" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlProvince_SelectedIndexChanged"> </asp:DropDownList><br /> <br /> <br /> <asp:DropDownList ID="ddlCity" runat="server"> </asp:DropDownList> </div> </form></body></html>Default.aspx.cs
using System;using System.Data;using System.Configuration;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.Data.OleDb;public partial class _Default : System.Web.UI.Page { public static OleDbConnection createCon() {
OleDbConnection con = new OleDbConnection("Provider = Microsoft.JET.OleDB.4.0;Data Source = |DataDirectory|mydata.mdb"); return con; } protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { OleDbConnection conn = createCon(); conn.Open(); OleDbCommand cmd = new OleDbCommand("select * from province_city where fartherid = 0", conn); OleDbDataReader dr = cmd.ExecuteReader(); ddlProvince.Items.Add(new ListItem("请选择省","")); ddlCity.Items.Add(new ListItem("请选择城市", "")); while (dr.Read()) { ddlProvince.Items.Add(new ListItem(dr["name"].ToString(),dr["id"].ToString())); } dr.Close(); conn.Close(); } } protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e) { if (ddlProvince.SelectedValue != "") { OleDbConnection conn = createCon(); conn.Open(); OleDbCommand cmd = new OleDbCommand("select * from province_city where fartherid = " + Convert.ToInt32(ddlProvince.SelectedValue), conn); OleDbDataReader dr = cmd.ExecuteReader(); ddlCity.Items.Clear(); while (dr.Read()) { ddlCity.Items.Add(new ListItem(dr["name"].ToString(), dr["id"].ToString())); } dr.Close(); conn.Close(); } }}
浙公网安备 33010602011771号