首先建立一个Area.html,很简单包含一个省份的select元素和一个城市的界面元素:
<html> <head> <title>Area Demo</title> </head> <body> <select id="province" size=1 onchange="loadCity()"> <option value="city01.xml"> 江苏 </option> <option value="city02.xml"> 湖南 </option> <option value="city03.xml"> 湖北 </option> </select> <select id="city" size=1> </select> <xml id="xmlobj"></xml> <script language="javascript" type="text/javascript"> var provobj = document.all("province"); var cityobj = document.all("city"); var xmlhttp = document.all("xmlobj"); loadCity(); /** * 装载城市数据 */ function loadCity() { cityobj.options.length = 0; var file = provobj.options[provobj.selectedIndex].value; xmlhttp.async = false; xmlhttp.load(file); var cities = xmlhttp.selectNodes("Cities/City"); var idx,name;
for(idx = 0; idx < cities.length; idx ++) { name = cities[idx].getAttribute("name"); cityobj.options.length++; cityobj.options[cityobj.options.length - 1].value = name; cityobj.options[cityobj.options.length - 1].text = name; } } </script> </body> </html>
然后建立三个省份的城市数据文件,分别命名为city01.xml,city02.xml,city03.xml
<?xml version="1.0" encoding="GB2312"?> <!-- edited with XMLSPY v2004 rel. 4 U (http://www.xmlspy.com) by Dicky (Apple'S Eden) --> <Cities Province="江苏"> <City name="南京"/> <City name="盐城"/> <City name="扬州"/> <City name="连云港"/> <City name="淮阴"/> <City name="南通"/> </Cities>
<?xml version="1.0" encoding="GB2312"?> <!-- edited with XMLSPY v2004 rel. 4 U (http://www.xmlspy.com) by Dicky (Apple'S Eden) --> <Cities Province="江苏"> <City name="南京"/> <City name="盐城"/> <City name="扬州"/> <City name="连云港"/> <City name="淮阴"/> <City name="南通"/> </Cities>
<?xml version="1.0" encoding="GB2312"?> <!-- edited with XMLSPY v2004 rel. 4 U (http://www.xmlspy.com) by Dicky (Apple'S Eden) --> <Cities Province="湖北"> <City name="武汉"/> <City name="荆州"/> </Cities>
保存,在ie6浏览通过,理论上可以在ie5一上浏览器跑。 
|