多级联动下拉框控件实现

现在实现控件联动的有纯脚本实现和AJAX，当数据量大时，AJAX的确不错，当数据不是很多时，用AJAX就有点浪费了。
这里我们介绍如何用纯脚本实现多级联动下拉框控件的生成。
希望大家给与建议。

脚本 LinkageControl.js
负责生成多个下拉框，并实现父级控件改变时刷新子列表。

1. /*********************************
2. 描述：多级级联控件基础脚本
3. 作者：叶浩恩
4. 日期：2008-8-2
5. 版本：0.1
7. 使用说明：
8. 需要在页面进行以下初始化工作
9. 1。在脚本定义前，建立脚本输出的容器
10. <div id="LinkageContor"></div>
12. 2。定义级联控件列表
14. 3。如果需要处理最后一层节点改变，定义函数  LastLinkageControlChange()
16. 4。调用初始化函数 InitControl("LinkageContor");
18. 5. 支持页面回调保持原来选择
19. 服务器端根据页面提交的信息，生成脚本
20.     var LinkageContorBindValues = new Array();
21.     LinkageContorBindValues[0] = "key1";
22.     LinkageContorBindValues[1] = "key8";
23.     ...
24.     生成的脚本需要在调用InitControl前
25. **********************************/
27. // 多级级联控件树结点定义类
28. function LinkageControlNode(p_name, p_value, p_level, p_chiltNodes)
29. {
30.     // 定义 tagName 值
31.     this.tagName = "LinkageControlNode";
32.     
33.     // 节点ID
34.     this.KeyId = "";
35.     
36.     // 节点名称
37.     this.Name=p_name;
38.     // 节点值
39.     this.Value = p_value;
40.     // 节点值2,保存额外的数据
41.     this.Value2 = p_value;
42.     // 节点深度值
43.     this.Level = p_level;
44.     // 子节点列表
45.     if (p_chiltNodes!=null)
46.         this.ClientNodes = p_chiltNodes;
47.     else
48.         this.ClientNodes = new Array();
49. }
51. // 根据节点定义创建一个列表的 OPTION 项，并进行必要的付值。
52. LinkageControlNode.prototype.CreateOptionElement= function()
53. {
54.     // 创建列表项
55.     var oOption = document.createElement("OPTION");
56.     oOption.text = this.Name;
57.     oOption.value= this.Value;
58.     
59.     // 列表项可以通过 Node 属性访问对应的节点信息
60.     oOption.Node = this;
61.     return oOption;
62. }
63.     
64. // 实现多级级联控件列表数据绑定
65. // ctrl: 绑定的下拉框控件
66. // source:数据源 LinkageControlNode 数组，
67. function BindLinkageControl(ctrl, source)
68. {
69.     if (ctrl == null)
70.         alert("BindLinkageControl:: ctrl 参数为空！");
71.     if (ctrl.tagName != "SELECT")
72.         alert("BindLinkageControl:: ctrl 参数不是下拉框控件类型！");
73.     if (source == null)
74.         alert("BindLinkageControl:: source 参数为空！");
75.         
76.     // 清空原列表
77.     var i = 0;
78.     ctrl.options.length = 0;
79.     for (i = 0; i < source.length; i++)
80.     {
81.         ctrl.options[i] = source[i].CreateOptionElement();
82.     }
83.     
84.     // 如果列表只有一项,不会触发onchange事件，
85.     // 我们需要选择他,让它可以自动绑定到下一层空间
86.     if (ctrl.options.length > 0 && ctrl.options[0].Node != null && ctrl.LinkageLevel < linkageControlLevel - 1)
87.     {
88.         BindLinkageControl(ctrl.NextLevelControl, ctrl.options[0].Node.ClientNodes);
89.     }
92.     
93. }
95. // 级联控件选择变化事件处理函数
96. function LinkageControlChange(e)
97. {
98.     var oSource;
99.     if(e!=null)
100.         oSource = e.target;
101.     else
102.         oSource = window.event.srcElement;
104.     if (oSource == null)
105.     {
106.         alert("LinkageControlChange 无法获得当前事件源控件！");
107.         return;
108.     }
109.         
110.     // 取当前值
111.     var currentControlLevel = oSource.LinkageLevel;
112.     var selectOption = oSource.options[oSource.selectedIndex];
113.     if (selectOption == null)
114.     {
115.         alert("无法获得当前选择项数据！");
116.         return;
117.     }
119.     //alert("selectOption="+selectOption);
120.     //alert("selectOption.Node="+selectOption.Node);
121.     //alert("selectOption.Node.ClientNodes="+selectOption.Node.ClientNodes);
122.     var selectName  = selectOption.text;
123.     var selectValue = selectOption.value;
124.     //alert("selectName="+selectName);
125.     //alert("selectValue="+selectValue);
127.     oSource.TextField.value = selectName;
129.     // 取下一个控件
130.     var nextControl = oSource.NextLevelControl;
131.     //alert(nextControl);
132.     if (nextControl == null)
133.     {
134.         alert("无法获得下一个级联控件！");
135.         return;
136.     }
138.     if (selectOption.Node == null)
139.     {
140.         alert("当前选择项未设置 Node 数据！");
141.         return;
142.     }
144.     // 重新绑定内容
145.     BindLinkageControl(nextControl, selectOption.Node.ClientNodes);
146. }
150. // 创建级联控件
151. function CreateLinkageControl(obj, level, linkageContorName, linkageContorTitle)
152. {
153.     if (obj == null)
154.     {
155.         alert("CreateLinkageControl obj 参数为空！");
156.         return ;
157.     }
158.     if (typeof(level) != "number")
159.     {
160.         alert("CreateLinkageControl level 参数为空或不是整数！");
161.         return;
162.     }
163.     if (level < 2)
164.     {
165.         alert("CreateLinkageControl level 参数值小于2，无法创建级联控件！");
166.         return;
167.     }
168.     // 存放控件的数组
169.     var listControls = new Array();
170.     var i = 0;
171.     // 检查是否需要显示标题
172.     var bCreateLabel = (typeof(linkageContorTitle)!="undefined");
173.     
174.     for (i = 0; i < level; i++)
175.     {
176.         // 控件名称和ID
177.         var ctrlName = linkageContorName + "_" + i;
178.         
179.         // 建立一个隐藏域，存放选择项的文本值。
180.         var textFieldName = ctrlName + "_text";
181.         var textField = document.createElement("input");
182.         textField.type = "hidden";
183.         textField.id = textFieldName;
184.         textField.name = textFieldName;
185.         // 加入列表
186.         obj.appendChild(textField);
188.         if(bCreateLabel && linkageContorTitle[i] != null)
189.         {
190.             // 创建标题字符
191.             var label = document.createElement("LABEL");
192.             label.FOR = ctrlName;
193.             label.innerHTML = linkageContorTitle[i];
194.             obj.appendChild(label);
195.         }
196.         
197.         // 创建下拉框
198.         listControls[i] = document.createElement("select");
199.         listControls[i].id = ctrlName;
200.         listControls[i].name = ctrlName;
201.         listControls[i].LinkageLevel = i;
202.         listControls[i].TextField = textField;
204.         if (i > 0){
205.             listControls[i - 1].NextLevelControl = listControls[i];
206.         }
207.         
208.         // 加入列表
209.         obj.appendChild(listControls[i]);
210.         
211.         // 绑定改变选择事件
212.         // 如果不是最后一层空间，绑定 LinkageControlChange 函数
213.         if (i < linkageControlLevel - 1){
214.             listControls[i].onchange = LinkageControlChange;
215.         }
216.         else
217.         {   // 最后一层时，如果用户定义了 LastLinkageControlChange 函数，则绑定该函数
218.             if (typeof(LastLinkageControlChange) == "function")
219.             {
220.                 listControls[i].onchange = LastLinkageControlChange;
221.             }
222.         }
223.     }
224.     //alert("创建级联控件"+listControls.length);
225.     
226.     return listControls;
227. }
229. // 处理页面回传后的控件绑定
230. function RebindControl(listControls, linkageControlLevel)
231. {
232.     // 检查由服务器端输出的原控件值。
233.     // 当页面PostBack后，需要将原控件的值，填写道教本数组 LinkageContorBindValues 中。
234.     if (typeof(LinkageContorBindValues) == "undefined")
235.     {
236.         return;
237.     }
238.     var i = 0, j = 0;
239.     // 检查每个下拉框控件
240.     for (i = 0; i < linkageControlLevel && i < listControls.length; i++)
241.     {
242.         // 将下拉框每个选择项值与服务器绑定值比较
243.         for (j = 0 ; j < listControls[i].options.length; j++)
244.         {
245.             if (listControls[i].options[j].value == LinkageContorBindValues[i])
246.             {
247.                 // 找到后，让该项选中，刷新下一个联动控件的值,并退出循环
248.                 listControls[i].selectedIndex = j;
249.                 
250.                 if (i < linkageControlLevel -1)
251.                 {
252.                     BindLinkageControl(listControls[i+1], listControls[i].options[j].Node.ClientNodes);
253.                 }
254.                 break;
255.             }
256.         }
257.     }
258. }
260. // 初始化并创建多级绑定控件
261. function InitControl(divName, linkageControlLevel, linkageContorName, linkageContorTitle, rootNodes)
262. {
263.     var obj = document.getElementById(divName);
264.     if (obj == null)
265.     {
266.         alert("找不到用于填充级联控件的指定元素！");
267.         return;
268.     }
269.     if (rootNodes == null) return;
270.     
271.     // 创建级联控件
272.     var listControls = CreateLinkageControl(obj, linkageControlLevel, linkageContorName, linkageContorTitle);
274.     // 绑定第一层空间
275.     if (listControls != null && listControls.length > 0)
276.     {
277.         BindLinkageControl( listControls[0], rootNodes);
278.         RebindControl(listControls, linkageControlLevel);
279.     }
280. }

以下是页面文件内容：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" >
3. <head>
4.     <title>级联控件测试</title>
5.     <script src="LinkageControl.js" type="text/javascript" language="javascript"></script>
6. </head>
7. <body>
8. <form action="LinkageControl.htm" >
9.     <div id="LinkageContor"></div>
10.     <script type="text/javascript" language="javascript">
11.     <!--
12.     // 定义级联控件数量
13.     var linkageControlLevel = 3;
14.     // 级联控件的名称
15.     var linkageContorName = "AreaZoneSelect";
16.     // 控件前面显示的标题
17.     var linkageContorTitle = new Array();
18.     i = 0;
19.     linkageContorTitle[i++] = "省";
20.     linkageContorTitle[i++] = "市";
21.     linkageContorTitle[i++] = "地区";
23. // <%= GetRebindData() %> 调用服务器端代码。。。输出一下格式数据
24. //  var LinkageContorBindValues = new Array();
25. //  LinkageContorBindValues[0] = "key1";
26. //  LinkageContorBindValues[1] = "key8";
27.     
28.     function CreateData()
29.     {
30.         i = 0, j = 0;
31.         rootNodes = new Array();
32. // <%= GetCreateDataScript() %> 调用服务器端代码。。。填充节点内容。。。输出一下格式数据
34.         rootNodes[i] = new LinkageControlNode("--请选择--", null, 0, null);
35.         i++;
36.         
37.         j = 0;
38.         rootNodes[i] = new LinkageControlNode("广东省", "T_guangdong", 0, null);
39.         rootNodes[i].ClientNodes[j] = new LinkageControlNode("深圳市", "S_shenzhen", 1, null);
40.         rootNodes[i].ClientNodes[j].ClientNodes[0] = new LinkageControlNode("罗湖区", "S_shenzhen_luohu", 1, null);
41.         rootNodes[i].ClientNodes[j].ClientNodes[1] = new LinkageControlNode("福田区", "S_shenzhen_futian", 1, null);
42.         j++;
43.         rootNodes[i].ClientNodes[j] = new LinkageControlNode("广州市", "S_guangzhou", 1, null);
44.         rootNodes[i].ClientNodes[j].ClientNodes[0] = new LinkageControlNode("越秀区", "S_guangzhou", 1, null);
45.         rootNodes[i].ClientNodes[j].ClientNodes[1] = new LinkageControlNode("荔湾区", "S_guangzhou", 1, null);
46.         i++;
47.         
48.         j = 0;
49.         rootNodes[i] = new LinkageControlNode("湖南省", "T_hunan", 0, null);
50.         rootNodes[i].ClientNodes[j] = new LinkageControlNode("长沙市", "S_changsha", 1);
51.         rootNodes[i].ClientNodes[j].ClientNodes[0] = new LinkageControlNode("芙蓉区", "S_changsha1", 1, null);
52.         rootNodes[i].ClientNodes[j].ClientNodes[1] = new LinkageControlNode("雨花区", "S_changsha2", 1, null);
53.         j++;
54.         rootNodes[i].ClientNodes[j] = new LinkageControlNode("株洲市", "S_zhuzhou", 1);
55.         rootNodes[i].ClientNodes[j].ClientNodes[0] = new LinkageControlNode("动物园", "S_zhuzhou1", 1, null);
56.         rootNodes[i].ClientNodes[j].ClientNodes[1] = new LinkageControlNode("火车站", "S_zhuzhou2", 1, null);
57.         return rootNodes;
58.     }
60.     InitControl("LinkageContor", linkageControlLevel, linkageContorName, linkageContorTitle, CreateData());
61.     --></script>
62.     
63.     <input type="button" value="view" onclick="alert(document.getElementById('AreaZoneSelect_2').value);" />
64. </form>
65.     </body>
66. </html>