First set up a area.html, very simple contains the Select element of a province and the interface elements of a city:
<title>area demo</title>
<body>
<select id= "province" Size=1 >
<option value= "City01.xml" > Jiangsu </option>
<option value= "City02.xml" >º Hunan </option>
<option value= "City03.xml" > Hubei </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 ();
/**
* Load City Data
*/
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>
Then the city data files of three provinces were established, named City01.xml,city02.xml,city03.xml
<?xml version= "1.0" encoding= "GB2312"?>
<cities province= "Jiangsu" >
<city name= "Nanjing"/>
</Cities>
<?xml version= "1.0" encoding= "GB2312"?>
<cities province= "Hunan" >
<city name= "Changsha"/>
</Cities>
<?xml version= "1.0" encoding= "GB2312"?>
<cities province= "Hubei" >
<city name= "Wuhan"/>
</Cities>
Save, browse through in IE6, theoretically can run in IE5 browser.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
