【自然框架】n级下拉列表框的原理

 

　　其实原理也很简单，分成两个部分，一个是服务器端，一个是客户端。

 

　　首先要设置记录集，这里用DataSet来装载，二级联动，里面就要有两个DataTable；三级联动，里面就要有三个DataTable。同理，n级联动就要有n个DataTable。

 

　　然后用第一个DataTable来绑定第一个DropDownList。第一个DropDownList是固定生成的，其他的DropDownList则是根据级数动态new出来的。

 

　　服务器端会根据联动级数来动态创建下拉列表框。就是这样：lst = new MyDropDownList();这样呢，做一个循环，有n级就new出来n-1个。然后在设置一些属性，根据上一个DropDownList的第一个选项，作为过滤条件，绑定控件。这样第一次的显示工作就完成了。

 

 

for (i = 1; i < ds_List.Tables.Count; i++)
                {
                    dv = ds_List.Tables[i].DefaultView;

                    #region 绑定其他的列表框
                    //获取过滤条件
                    dv.RowFilter = "ParentID=" + ParentID;

                    //定义新的下拉列表框
                    lst = new MyDropDownList();
                    lst.EnableViewState = true;

                    lst.ID = "lst" + i;
                    lst.DataTextField = "txt";
                    lst.DataValueField = "id";

                    if (str_HTML.Length > 2 * i)
                        this.Controls.Add(new LiteralControl(str_HTML[2 * i]));

                    //添加下拉列表框
                    this.Controls.Add(lst);
                    if (str_HTML.Length > 2 * i + 1)
                        this.Controls.Add(new LiteralControl(str_HTML[2 * i + 1]));

                    lst.DataSource = dv;
                    lst.DataBind();

                    //设置父ID。第一次访问，取下拉列表框的第一个选项的值
                    if (dv.Count > 0)
                        ParentID = dv[0][1].ToString();
                    else
                        ParentID = "-9999";

                    #endregion
                }

 

 

　　然后要输出一个js的数组，当初不会json，也不喜欢xml，所以就用数组来装载了。把这个数组输出到页面里。然后客户端的js就可以访问到需要的数据了。

 

　　下面说一下客户端。客户端是通过js的onchange函数实现联动，原理呢就是“递归”。写两个js函数就搞定了，一个是入口函数（lst_change），另一个是结束函数（lstSelected）。

 

　　当第一个下拉列表框触发了onchange函数（lst_change）的时候，会根据用户的选项对下一个下拉列表框的item进行设置，然后判断一下是否有下下一个下拉列表框，有的话递归调用lst_change（），没有的话调用结束函数（lstSelected）。

 

　　这样不管有多少个下拉列表框，都可以用这两个js函数搞定。

 

 

　　注意点：

　　1、由于用的是服务器控件DropDownList，他有一个“特点”，那就是在客户端用js设置的item，在服务器端都是不承认的。为了解决这个问题，我用了一个奔办法，加了一个文本框，用这个文本框来保存客户的选项。然后提交表单，根据这个文本框里的内容来确定客户选择了哪些选项。

 

　　

　　原来基本就是这样。然后打算引入jQuery和json来简化一下代码，再然后看看能不能做成纯客户端的，就是不用服务器控件了，直接使用 html的input。