分享一个好用的n级联动下拉列表框（有源码、有省市区县数据库）,该如何解决-ASP.NET教程-爱易网页

分享一个好用的n级联动下拉列表框（有源码、有省市区县数据库）,该如何解决

日期：2014-05-18　浏览次数：20481 次

分享一个好用的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] = "城市：";

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

分享一个好用的n级联动下拉列表框（有源码、有省市区县数据库）,该如何解决

相关资料更多>

推荐阅读更多>