首先建立一个Area.html，很简单包含一个省份的select元素和一个城市的界面元素：
1<html>
2<head>
3<title>Area Demo</title>
4</head>
5<body>
6<select id="province" onchange="loadCity()" size="1">
7<option value="city01.xml"> 江苏 </option>
8<option value="city02.xml"> 湖南 </option>
9<option value="city03.xml"> 湖北 </option>
10</select>
11<select id="city" size="1">
12</select>
13<xml id="xmlobj"></xml>
14<script language="javascript" type="text/javascript">
15var provobj = document.all("province");
16var cityobj = document.all("city");
17var xmlhttp = document.all("xmlobj");
18loadCity();
19/**
20* 装载城市数据
21*/
22function loadCity() {
23cityobj.options.length = 0;
24var file = provobj.options[provobj.selectedIndex].value;
25xmlhttp.async = false;
26xmlhttp.load(file);
27var cities = xmlhttp.selectNodes("Cities/City");
28var idx,name;
29
30for(idx = 0; idx < cities.length; idx ++) {
31name = cities[idx].getAttribute("name");
32cityobj.options.length++;
33cityobj.options[cityobj.options.length - 1].value = name;
34cityobj.options[cityobj.options.length - 1].text = name;
35}
36}
37</script>
38</body>
39</html>
然后建立三个省份的城市数据文件，分别命名为city01.xml,city02.xml,city03.xml
1<cities province="江苏">
2<city name="南京"></city>
3<city name="盐城"></city>
4<city name="扬州"></city>
5<city name="连云港"></city>
6<city name="淮阴"></city>
7<city name="南通"></city>
8</cities>
1<cities province="江苏">
2<city name="南京"></city>
3<city name="盐城"></city>
4<city name="扬州"></city>
5<city name="连云港"></city>
6<city name="淮阴"></city>
7<city name="南通"></city>
8</cities>
1<cities province="湖北">
2<city name="武汉"></city>
3<city name="荆州"></city>
4</cities>
保存，在ie6浏览通过，理论上可以在ie5一上浏览器跑。