首页 > 代码库 > ASP.NET——实现两个下拉框动态联动
ASP.NET——实现两个下拉框动态联动
引入:
在网页中,我们经常会遇到下图中的情况。首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市。这样设计极大的方便了用户的查找。那这是如何实现的呢?
1、建立数据库
“省”表
“市”表
2、添加控件
3、两个下拉框分别绑定数据源
protected void Page_Load(object sender, EventArgs e) { //判断是否第一次进入页面,如果是,则绑定数据库;如果不是,则无需绑定。 if (!this.IsPostBack) { //绑定省 SqlConnection con = DB.createConnection(); con.Open(); string cmdText = "select* from province"; SqlCommand cmd = new SqlCommand(cmdText, con); SqlDataReader sdr = cmd.ExecuteReader(); this.DropDownList1.DataSource = sdr; this.DropDownList1.DataTextField = "proName";//文本内容 this.DropDownList1.DataValueField = "proID"; //数据源字段 this.DropDownList1.DataBind(); sdr.Close(); //绑定市 string cmdCityText = "select* from city where proID=" + this.DropDownList1.SelectedValue; SqlCommand cmdCity = new SqlCommand(cmdCityText, con); sdr = cmdCity.ExecuteReader(); //剩下部分与绑定省类似,略 //关闭连接 con.Close(); } }
到这里,两个文本框都已经加载到各自的数据。剩下的就是动态联动了。
4、当我们更改第一个下拉框中的内容后,会触发第一个文本框的SelectedIndexChanged事件。将第一个下拉框的proID(省的ID)作为参数,即可查到其市的内容。
具体代码如下:
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { //省的ID string proID = this.DropDownList1.SelectedValue; SqlConnection con = DB.createConnection(); con.Open(); SqlCommand cmd = new SqlCommand("select * from city where proID=" + proID, con); SqlDataReader sdr = cmd.ExecuteReader(); //绑定 this.DropDownList2.DataSource = sdr; this.DropDownList2.DataTextField = "cityName"; this.DropDownList2.DataValueField = "cityID"; this.DropDownList2.DataBind(); sdr.Close(); con.Close(); }
这样,我们就可以实现动态联动了。这样的动态联动,一般由多个下拉框组成一组菜单,比如上面用到的两个下拉框。下拉菜单之间有联动的关系。当上级的选中项发生改变时,下级会根据上级中的选中项显示相应的内容。
虽然只是一个小技巧或者说是小的需求,但当数据量特别大时,它的功能就不可小视了。上次期末考试导考生的时候,可能只是一个页面忽略了这个功能,结果导致工作量大大增加。
用了动态联动之后,当面对庞大的数据或复杂的分类时,页面的加载速度也不会受到影响,也方便了用户查找。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。