分享一个好用的n级联动下拉列表框(有源码、有省市区县数据库),该如何解决
分享一个好用的n级联动下拉列表框(有源码、有省市区县数据库)
特点:
1、 使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。
2、 支持n级。
3、 封装成了服务器控件,所以使用非常简单。
4、 支持在回发的时候保持状态。
5、 支持修改记录的时候设置默认选项。
6、 页面设置比较灵活。
7、 采用DataSet作为数据的容器。
缺点:
1、 由于是把需要的数据一次性写入页面交给客户端,所以在网速比较慢的时候,显示页面需要比较长的时间。
可以改进的地方:
1、 引入json,可以把需要的数据放到单独的js文件里面,这样可以减少带宽的压力。
2、 Ajax,按需所取。每次只加载需要的数据。
在线演示:
使用省、市、区县的数据库进行演示。由于服务器的网速很慢,所以需要等待一下,等页面完全下载完毕之后,才可以使用,否则会出现js脚本错误。页面完全下载完毕之后就没有js脚本错误了。
n级联动下拉列表框在线演示
1、 二级联动的演示
以省、市联动为例演示。提交表单后可以保持状态,可以设置选项。
二级联动在线演示
2、 三级联动的演示
以省、市、区县联动为例演示。提交表单后可以保持状态,可以设置选项。
三级联动在线演示
(服务器的网速有点慢,网页又有点大,所以需要一点时间下载。)
与二级联动的代码相对比,只是SQL语句的地方不同,即多了一条SQL语句。其他的都是一样的。同理,如果是四级的,那么就在多一条SQL语句。
n级联动,那么就需要n条SQL语句。
3、 修改记录演示
一般在修改记录的时候,需要根据记录里的信息设置列表框的选项,这里演示了这种功能。
修改记录在线演示
增加下面这样的代码即可。
4、 页面修饰演示
您看了上面的演示,可呢会觉得几个下拉列表框挨在一起太难看了,这里演示如何来做修饰。这个可以在下拉列表框的前面,加上一些修饰。
n级联动下拉列表框
特点:
1、 使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。
2、 支持n级。
3、 封装成了服务器控件,所以使用非常简单。
4、 支持在回发的时候保持状态。
5、 支持修改记录的时候设置默认选项。
6、 页面设置比较灵活。
7、 采用DataSet作为数据的容器。
缺点:
1、 由于是把需要的数据一次性写入页面交给客户端,所以在网速比较慢的时候,显示页面需要比较长的时间。
可以改进的地方:
1、 引入json,可以把需要的数据放到单独的js文件里面,这样可以减少带宽的压力。
2、 Ajax,按需所取。每次只加载需要的数据。
在线演示:
使用省、市、区县的数据库进行演示。由于服务器的网速很慢,所以需要等待一下,等页面完全下载完毕之后,才可以使用,否则会出现js脚本错误。页面完全下载完毕之后就没有js脚本错误了。
n级联动下拉列表框在线演示
1、 二级联动的演示
以省、市联动为例演示。提交表单后可以保持状态,可以设置选项。
二级联动在线演示
- C# code
protected void Page_Load(object sender, EventArgs e) { DataAccessLibrary dal = DALFactory.CreateDAL(); string sql = @"SELECT AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '__0000') SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000') "; DataSet ds = dal.ExecuteFillDataSet(sql); this.lst_Area.DataSource = ds; this.lst_Area.DataBind(); } protected void btn_Save_Click(object sender, EventArgs e) { //提交表单后,获取联动下拉列表框的选项值 //获取ID string itemID = this.lst_Area.SelectedValue; this.txt_Value.Text = itemID; //获取text string itemText = this.lst_Area.SelectedText; this.txt_Value.Text = itemID; } protected void btn_SetItemSelect_Click(object sender, EventArgs e) { //设置下拉列表框的选项 string itemID = this.txt_SetID.TextTrimNone; this.lst_Area.SetSelectedValue(itemID); }
2、 三级联动的演示
以省、市、区县联动为例演示。提交表单后可以保持状态,可以设置选项。
三级联动在线演示
(服务器的网速有点慢,网页又有点大,所以需要一点时间下载。)
- C# code
protected void Page_Load(object sender, EventArgs e) { DataAccessLibrary dal = DALFactory.CreateDAL(); string sql = @"SELECT AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '__0000') SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode LIKE '____00') AND (AreaCode NOT LIKE '__0000') SELECT ParentID,AreaID AS id, AreaName AS txt FROM Base_Area WHERE (AreaCode NOT LIKE '__0000') AND (AreaCode NOT LIKE '____00') "; DataSet ds = dal.ExecuteFillDataSet(sql); this.lst_Area.DataSource = ds; this.lst_Area.DataBind(); }
与二级联动的代码相对比,只是SQL语句的地方不同,即多了一条SQL语句。其他的都是一样的。同理,如果是四级的,那么就在多一条SQL语句。
n级联动,那么就需要n条SQL语句。
3、 修改记录演示
一般在修改记录的时候,需要根据记录里的信息设置列表框的选项,这里演示了这种功能。
修改记录在线演示
增加下面这样的代码即可。
- C# code
if (!Page.IsPostBack) { //6,568,572 是“辽宁省,抚顺市,望花区”对于的ID //实际项目中,是从数据库里获取,然后设置,这里只是一个实例 this.lst_Area.SetSelectedValue("6,568,572"); }
4、 页面修饰演示
您看了上面的演示,可呢会觉得几个下拉列表框挨在一起太难看了,这里演示如何来做修饰。这个可以在下拉列表框的前面,加上一些修饰。
n级联动下拉列表框
- C# code
protected virtual void SetHTML() { //一行里,下拉列表框前面加说明的方法 string[] html = new string[6]; html[0] = "省份:"; html[2] = "城市:"; html[4] = "区/县:"; this.lst_Area.ListHTML = html; }