传统的HTML页面中连动下拉框采用了两种方法：
1）直接将下拉框中的内容hardcode于html的javascript中，调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。
1<html>
2<head>
3<title>List</title>
4<meta c="" content='\"text/html;' harset='gb2312\"' http-equiv='\"Content-Type\"'/>
5<script language='\"javascript\"'>
6<!--
7var onecount;
8onecount=0;
9
10subcat = new Array();
11subcat[0] = new Array(\"徐汇区\",\"01\",\"001\");
12subcat[1] = new Array(\"嘉定区\",\"01\",\"002\");
13subcat[2] = new Array(\"黄浦区\",\"01\",\"003\");
14subcat[3] = new Array(\"南昌市\",\"02\",\"004\");
15subcat[4] = new Array(\"九江市\",\"02\",\"005\");
16subcat[5] = new Array(\"上饶市\",\"02\",\"006\");
17
18onecount=6;
19
20function changelocation(locationid)
21{
22document.myform.smalllocation.length = 0;
23
24var locationid=locationid;
25var i;
26document.myform.smalllocation.options[0] = new Option(\'====所有地区====\',\'\');
27for (i=0;i <onecount; i++)
28{
29if (subcat[i][1] == locationid)
30{
31document.myform.smalllocation.options[document.myform.smalllocation.length]
32= new Option(subcat[i][0], subcat[i][2]);
33}
34}
35
36}
37
38//-->
39</script>
40</head>
41<body>
42<form method='\"post\"' name='\"myform\"'>
43<select name='\"biglocation\"' onchange='\"changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)\"'>
44<option selected="" value='\"01\"'>上海</option>
45<option value='\"02\"'>江西</option>
46</select>
47<select name='\"smalllocation\"'>
48<option selected="" value='\"\"'>==所有地区==</option>
49</select>
50</form>
51<script language='\"javascript\"'>
52<!--
53changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
54//-->
55</script>
56</body>
57</html>
2）javascript 直接读取数据库，取数据库中的记录写入javascript中，然后和第一种方法一样，调用javascript函数循环写入下拉框中。此方法将数据源与javascript分开，但,公开数据库的连接，从安全角度说，没有多少实用价值。
我的方法是将下拉框中的数据放在XML文件中，用javascript读XML文件，取得下拉框中的内容。
HTML 文件如下：
1<html>
2<head>
3<script event='\"onload\"' for='\"window\"' language='\"JavaScript\"'>
4var xmlDoc = new ActiveXObject(\"Microsoft.XMLDOM\");
5var i=0;
6var j=0;
7var subclass_name=\"\";
8loadXML();
9function loadXML(){
10xmlDoc.async=\"false\";
11xmlDoc.load(\"account.xml\");
12xmlObj=xmlDoc.documentElement;
13nodes = xmlDoc.documentElement.childNodes;
14document.frm.mainclass.options.length = 0;
15document.frm.subclass.options.length = 0;
16
17for (i=0;i<xmlObj.childNodes.length;i++){
18labels=xmlObj.childNodes(i).getAttribute(\"display_name\");
19values=xmlObj.childNodes(i).text;
20document.frm.mainclass.add(document.createElement(\"OPTION\"));
21document.frm.mainclass.options[i].text=labels;
22document.frm.mainclass.options[i].value=values;
23
24}
25
26}
27
28
29</script>
30<script language='\"JavaScript\"'>
31var xmlDoc = new ActiveXObject(\"Microsoft.XMLDOM\");
32var i=0;
33var j=0;
34
35function deleteOption() {
36
37}
38
39function setsubclass(main){
40var is_selected=\"N\";
41if (document.frm.subclass.options.length!=0) {
42for (i=0;i<=document.frm.subclass.options.length;i++)
43document.frm.subclass.options[i]=null ;
44}
45//重复才有效
46if (document.frm.subclass.options.length!=0) {
47for (i=0;i<=document.frm.subclass.options.length;i++){
48document.frm.subclass.options[i]=null ;
49document.frm.subclass.options.remove(i);
50}
51}
52
53
54for (i=0;i<xmlObj.childNodes.length;i++){
55
56var values=\"\";
57var lables=\"\";
58
59if (is_selected==\"Y\") return;
60labels=xmlObj.childNodes(i).getAttribute(\"display_name\");
61values=xmlObj.childNodes(i).text;
62//alert(labels+ \" | \"+main);
63if (labels==main){
64
65is_selected=\"Y\";
66
67for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++){
68//subclass_name=\"document.frm.subclass\";
69labels=xmlObj.childNodes(i).childNodes(j).getAttribute(\"display_name\");
70values=xmlObj.childNodes(i).childNodes(j).text;
71//alert(values);
72document.frm.subclass.add(document.createElement(\"OPTION\"));
73document.frm.subclass.options[j].text=labels;
74document.frm.subclass.options[j].value=values;
75
76}
77
78}
79
80}
81}
82</script>
83<title>在HTML中调用XML数据</title>
84</head>
85<body bgcolor='\"#FFFFFF\"'>
86<form name='\"frm\"'>
87类型<select name='\"mainclass\"' onchange="\'setsubclass(this[selectedIndex].text)\'"></select>
88<option selected="" value='\"\"'></option>
89子类<select name='\"subclass\"'></select>
90</form>
91</body>
92</html>
account.xml 如下：
1<item>
2<class display_name='\"未选定\"'>
3<subclass display_name='\"\"'>Not Available</subclass>
4</class>
5<class display_name='\"95788主叫卡\"'>
6<subclass display_name='\"1152069589-1152069638\"'>dangdang1</subclass>
7<subclass display_name='\"1152081031-1152081080\"'>dangdang2</subclass>
8<subclass display_name='\"1152547201-1105254750\"'>dangdang3</subclass>
9<subclass display_name='\"1152548401-1152548700\"'>dangdang4</subclass>
10<subclass display_name='\"1152548701-1152549000\"'>dangdang5</subclass>
11<subclass display_name='\"1156000001-1156010000\"'>dangdang6</subclass>
12</class>
13<class display_name='\"网上注册\"'>
14<subclass display_name='\"1152000001-1152001000\"'>zhuce_user1</subclass>
15<subclass display_name='\"1151001000-1151005000\"'>zhuce_user2</subclass>
16</class>
17<class display_name='\"通讯\"'>
18<subclass display_name='\"1156030001-1156080000\"'>tongxun</subclass>
19</class>
20</item>
此方法将数据源与javascript程序分开，适合经常变化的数据源。xmlDoc.load中可以直接调用URL参数,读取远程XML，实现松耦合。以上应用在IE6.0中通过。不足之处是在去除下拉框列表内容时需要
重复执行删除操作，否则会有明显的bug.希望有读者能给指正。