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-12-29 05:37:40

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

DropDownList控件:两级联动--【Asp.Net】

最近学习Asp.Net,发现很多控件都很有意思,例如:Canlender,AdRotator等.以前只知道有这样的页面效果,但是对这些控件了解并不多.不怕不知道,就怕不知道. DropDownList,两级联动,做这个demo的时候,让我又爱又恨. 一开始的时候,自己就草草的建立了一个Fresh的数据库,建立了一个Student表如下图所示: 在页面上面放了两个DropDownList,两个SqlDataSource.如下图所示: 下面就需要通过SqlDataSource设置数据源,让DropD

NET:异步刷新,dropdownlist两级联动, Triggers

PS::我在论坛发了个求助帖子,居然没啥人回..好纠结啊... http://bbs.csdn.net/topics/390809330 目的:三个dropdownlist A  B   C,     要求实现  A  联动 C,   B 联动 C 涉及:ScriptManager .  UpdatePanel ,  Triggers,   AsyncPostBackTrigger ScriptManager 对象集:启用局部呈现 <asp:ScriptManager ID="Script

Combobox下拉框两级联动

下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科目两张表,每门科目都对应一个年级,所以我们可以用两个下拉框(Combobox)来存储年级和科目信息来供用户选择.界面如下: 这时如果我们将科目对应的下拉框直接绑定科目表时,用户选择一个年级后还要从所有科目中进行选择就会降低系统的友好性,甚至可能出现没有任何意义的查询语句.我们可以先绑定年级下拉框的数

故障管理系统--select两级联动查询

写故障管理系统时,根据主类-平台进行故障搜索,需要用到select两级联动查询 我前端技术纯菜鸟,请教了个水平高的同事才搞定,所以记录下来,以免以后再忘了 前端html <form id="tab" class="form-inline" role="form" action='/search/' method='GET' style="float:right;margin-top:-48px;margin-right:0px;&

JS练习:两级联动

代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两级联动</title> <script> //准备数据 var provinces = [ ["深圳市", "东莞市", "惠州市", "广州市"], ["长沙市", &quo

下拉框两级联动

//1.首先获取第一级菜单选中的值 第一级菜单id=select1 var val = $("#select1 option:selected").val() //2.如果第一级下拉框的值改变 $("#select1").change(function(){ //3.清楚第二级下拉框的数据 第二级下拉框的id=select2 $("#select2 > option").each(function(){ i++; if(i==1) retu

ASP_NET实现界面无刷新的DropdownList两级联动效果

所谓DropdownList联动,也就是在选一个DropdownList的时候使另外一个DropdownList的内容更新(如选省份时显示所属城市),按常规的方法那就是在第一个DropdownList的SelectedIndexChanged事件中改变第二个DropdownList的数据源及重新绑定,但是如果这样的话在每一次的重新选择将带来一次页面的刷新,除了屏幕闪动以外,如果同页有密码框的话,内容也会清除掉.这时我们就需要无刷新实现,基本原理在选择改变时用JS向另外一个隐藏页发送请求并得到一个

AJAX控制DropDownList两级联动

$(function () { $("#CompanyID").change(function () { var uid = $(this).val(); changediv(uid); }); }); function changediv(uid) { var url = "@Url.Action("GetJsonDrop","TheOrder")"; var param = new Object(); param.id =

Thinkphp 两级联动

<!-- 前端代码部分--><div class="pop-movegroup" id="salesmanBox"> <dl> <dt>选择推广账号:</dt> <dd> <!-- 一级联动的数据先查询遍历出来--> <select name="salesman" id="salesman"> <volist name=&qu