DropDownList绑定数据表实现两级联动示例

 这篇文章主要介绍了DropDownList绑定数据表实现两级联动具体实现,需要的朋友可以参考下

场景一:平时我们在DropDownList控件下添加下拉选项时,都会使用它的Item.Add方法,直接在代码下添加。如果我们想添加或修改下拉选项,则必须去修改源代码。如果几个DropDownList控件的下拉选项相同,我们则需要重复添加好多次,后期的维护工作很不方便。 
 
场景二:我们在12306网站买票时,肯定遇到过这么一种情景:我们需要先选定目的地的省份,选完省份后在城市选框中会自动加载该省份的城市,实现两级联动。 
 
针对以上两个场景,我们可以用DropDownList直接绑定数据表,根据选择的省份动态加载该省份下的城市。光说不练,不是好汉,让我用一个小Demo来大家演示下详细过程吧。 
 
首先我们需要在数据库中建立两个表,一个是Province(省份)表,一个是City(城市)表。建表语句如下: 
 代码如下:
Create Table Province 

ProID int primary key, 
ProName varchar(20) not null 

 
Create Table City 

CityID int primary key, 
ProID int foreign key references Province(ProID), 
CityName varchar(20) 

 
Insert into Province values('1','北京') 
Insert into Province values('2','河北') 
Insert into Province values('3','山东') 
 
insert into City values('1','1','海淀') 
insert into City values('2','1','丰台') 
insert into City values('3','1','大兴') 
insert into City values('4','2','衡水') 
insert into City values('5','2','廊坊') 
insert into City values('6','2','保定') 
insert into City values('7','3','济南') 
insert into City values('8','3','烟台') 
insert into City values('9','3','青岛') 
 
通过建表语句我们可以知道,北京下有三个城市--海淀、丰台、大兴,河北下有三个城市--衡水、廊坊、保定,山东有三个城市--济南、烟台、青岛。 
 
然后我们在Web窗体中放好控件,效果如下图所示: 
 
dropDownList控件名称分别为ddlProvince、ddlCity 
 
接着我们在Web后台代码中实现功能。我们需要在Web窗体加载时,ddlProvince控件绑定Province表,在ddlProvince下拉选项改变时,ddlCity控件绑定City表。实现代码如下: 
 
建立数据库连接类: 
 代码如下:
public class DB 

//连接数据库的字符串 
public static SqlConnection CreateConnection() 

SqlConnection con = new SqlConnection("Data Source=. ;Initial Catalog=test;uid=sa;pwd=123456;"); 
return con; 


 
Web窗体加载时执行代码: 
 代码如下:
protected void Page_Load(object sender, EventArgs e) 

//如果窗体是第一次加载 
if (!this.IsPostBack) 

//绑定省份 
SqlConnection con = DB.CreateConnection(); 
//打开数据库连接 
con.Open(); 
SqlCommand cmdProvince = new SqlCommand("select * from Province", con); 
SqlDataReader sdrProvince = cmdProvince.ExecuteReader(); 
//将sdrProvince中的内容绑定到ddlProvince下拉列表中 
this.ddlProvince.DataSource = sdrProvince; 
//需要显示的数据表Province中的内容 
this.ddlProvince.DataTextField = "ProName"; 
//需要显示的数据表Province中的主键 
this.ddlProvince.DataValueField = "ProID"; 
this.ddlProvince.DataBind(); 
sdrProvince.Close(); 
//关闭数据库连接 
con.Close(); 


 
ddlProvince控件下拉选项改变时执行的代码: 
 代码如下:
protected void ddlProvince_SelectedIndexChanged(object sender, EventArgs e) 

SqlConnection con = DB.CreateConnection(); 
//打开数据库连接 
con.Open(); 
//绑定城市 
SqlCommand cmdCity = new SqlCommand("select * from City where ProID=" + this.ddlProvince.SelectedValue, con); 
SqlDataReader sdrCity = cmdCity.ExecuteReader(); 
//将sdrCity中的内容绑定到ddlCity下拉列表中 
this.ddlCity.DataSource = sdrCity; 
//需要显示的数据表City中的内容 
this.ddlCity.DataTextField = "CityName"; 
//需要显示的数据表City中的主键 
this.ddlCity.DataValueField = "CityID"; 
this.ddlCity.DataBind(); 
sdrCity.Close(); 
//关闭数据库连接 
con.Close(); 

 
这样,我们就用DropDownList动态绑定数据表,实现了根据选择的省份动态下拉该省份下的城市的功能,达到了面向对象设计中解耦的目的,增强了代码的可维护性和用户的体验度。 
 
希望我的讲解能对大家有所帮助。 

时间: 2024-08-03 21:32:12

DropDownList绑定数据表实现两级联动示例的相关文章

DropDownList绑定数据表实现两级联动示例_实用技巧

场景一:平时我们在DropDownList控件下添加下拉选项时,都会使用它的Item.Add方法,直接在代码下添加.如果我们想添加或修改下拉选项,则必须去修改源代码.如果几个DropDownList控件的下拉选项相同,我们则需要重复添加好多次,后期的维护工作很不方便. 场景二:我们在12306网站买票时,肯定遇到过这么一种情景:我们需要先选定目的地的省份,选完省份后在城市选框中会自动加载该省份的城市,实现两级联动. 针对以上两个场景,我们可以用DropDownList直接绑定数据表,根据选择的省

jQuery 中国省市两级联动选择附图_jquery

复制代码 代码如下: <!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> <title>省市两级联动选择&l

asp.net datalist绑定数据后可以上移下移实现示例

 这篇文章主要介绍了asp.net datalist绑定数据后可以上移下移的示例代码,需要的朋友可以参考下  代码如下: if (e.CommandName == "Up")  {  int index = e.Item.ItemIndex;  string TitleID = rgZdgz.MasterTableView.DataKeyValues[index]["TitleID"].ToString().Trim();    if (e.Item.ItemInd

CYQ.Data 轻量数据访问层(八) 自定义数据表实现绑定常用的数据控件(中)

继上一节之后,我们开始寻找绑定之法 先是一回想,我们平常是拿什么绑定到数据控件的:List<实体类>,DataTable,DataSet,DataView之类的, 而写法也就这么个样: xxxx.DataSource=List<实体类>....等 XXxx.DataBind(); 于是,我们就从这些东西入手了,要不然也措不着头脑该往哪儿找 DataSource这东西要给赋值,那我们打开reflector.exe看看这里面究竟有点什么东西先 按下F3,搜索Repeater,当然也可以

CYQ.Data 轻量数据访问层(七) 自定义数据表实现绑定常用的数据控件(上)

继上一节实现MDataTable之后,我们再为MDataTable加上一个NewRow()方法,以便能构造出该表的新行 如下:  public MDataRow NewRow()        {            MDataRow mdr = new MDataRow();            mdr.TableName = _TableName;            MDataCellStruct mdcStruct = null;            for (int i = 0

CYQ.Data 轻量数据访问层(九) 自定义数据表实现绑定常用的数据控件(下)

还记得当初以为似找到:行数组Copy之后,再array.GetEnumerator();就可行.   实际操作之后,发现不可行,于是,这不可行的路就不写了,避免浪费大伙精力看了. 以下讲可行之路: 通过Reflector找到SqlDataReader类,因为它也是可绑定之一的数据源,虽然直拉绑定往往造成链接未关闭事件. 通过研究:   public class SqlDataReader : DbDataReader, IDataReader, IDisposable, IDataRecord

comboBox两级联动,数据从数据库中取出来,第二级数据死活加载不进store,求帮助

问题描述 数据加载的时候,城市的下拉菜单能出来,选择了城市之后想要选择地区,地区的placestore就一直是空的.困扰了好久,求解决.var citystore=new Ext.data.Store({proxy:new Ext.data.HttpProxy({url:'city_query.action'}),reader:new Ext.data.JsonReader({totalProperty:'total',root:'cityList'},[ {name:'id'}, {name:

利用xmlhttp实现的两级联动的dropdownlist

xml 在用户注册的时候需要根据不同的用户类型,重数据库中筛选出不同的产品提供给用户.想想,效果最好的只能是无刷新的方法了. 前台脚步:(js) function fillProduction() {    var dwl = document.all("DropdownlistLevel");    var htp = new ActiveXObject("microsoft.xmlhttp");    var url = "reg.aspx?fp=&q

关于DropDownList绑定数据的一点认识

数据   平时我们用DropDownList控件(如:下拉菜单时)显示栏目名称等时,一般可以用两种方法使其显示我们要的内容: 方法一:     //ddlFirstType即为DropDownList控件,下同    ddlFirstType.DataSource = ds.Tables[0].DefaultView;    //这里绑定的是在下拉菜单中显示出来的文字,比如"我的文章"    ddlFirstType.DataTextField = "CnName"