读书人

分享一个好用的n级联动下拉列表框(有

发布时间: 2012-03-15 11:50:38 作者: rapoo

分享一个好用的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;        }



5、 Table形式的表单
在表单里,如果是table形式的话,一行里只想显示一个列表框,那么要如何设置呢?

多级联动在线演示

省份、城市、区县各占一行的形式。

C# code
 protected override void SetHTML()        {            //多行表格的方法            string[] html = new string[6];            html[0] = "";            html[1] = "</td></tr>";            html[2] = "<tr><td align=\"right\">城市:</td><td>";            html[3] = "</td></tr>";            html[4] = "<tr><td align=\"right\">区/县:</td><td>";            this.lst_Area.ListHTML = html;        } 


6、 Div形式的表单
在表单里,如果是div形式,一行里只想显示一个列表框,那么又要如何设置呢?
多级联动在线演示

省份、城市、区县各占一行的形式。

C# code
protected override void SetHTML()        {            //多行表格的方法            string[] html = new string[6];            html[0] = "";            html[1] = "</div>";            html[2] = "<div class=\"formLeft\">城市:</div><div class=\"formRight\">";            html[3] = "</div>";            html[4] = "<div class=\"formLeft\">区/县:</div><div class=\"formRight\">";            this.lst_Area.ListHTML = html;        } 


注意:

  由于控件自身并没有保存数据,所以每次访问的时候,都需要设置DataSource 属性,并且需要绑定—ataBind)。这一点和一般的服务器控件不一样。

  设置选项的时候,需要在 if (!Page.IsPostBack) 内设置,否则无法得到用户的选择。


n级联动下拉列表框源码下载
省市区县数据库下载

原理在回复里。


[解决办法]
哥,你来的也太没技术含量了吧。。
搞点有技术的。。呵呵。
[解决办法]
强烈支持 正好解决刚刚那个朋友的问题了。。。喊他来看啊
[解决办法]
谢谢分享
不过一般都直接用jq操作xml

lz下次提供下中国各大学校,行业的xml
[解决办法]
支持一下
[解决办法]

[解决办法]
楼主的精神可贵,好东西就应该分享下
[解决办法]
其实刚load的时候可以获取一级菜单,然后根据用户的选择发送一个标识让服务器返回第N级的菜单就可以了...前2天做了个MENU只支持2级菜单,其实原理是差不多的...
[解决办法]
好东西支持一下
[解决办法]
被我点点,就点出错误页面出来了呢!

[解决办法]
问得最多的问题
[解决办法]
楼主好牛啊。
[解决办法]

[解决办法]
探讨
哥,你来的也太没技术含量了吧。。
搞点有技术的。。呵呵。

[解决办法]
这个是问的最多的问题。帮顶
[解决办法]
好东西呀,
[解决办法]
正需要。太好了。
[解决办法]
语法错误:“=”运算符后缺少操作数。



[解决办法]
这东西我做过,WINFORM程序的。不需要数据库,速度还行。
[解决办法]
多练习、优化、改进,肯定会成为一个非常不错的控件的!
加油!
[解决办法]
真正一步到位的!

读书人网 >asp.net

热点推荐