XML文件负责保存所需要的数据，而HTML文件负责通过javascript解析XML数据并显示在页面上。代码如下：
cities.xml
<?xml version="1.0" encoding="GB2312"?>
<china><province name="吉林省"><city>长春</city><city>吉林市</city><city>四平</city><city>松原</city><city>通化</city></province><province name="辽宁省"><city>沈阳</city><city>大连</city><city>鞍山</city><city>抚顺</city></province><province name="山东省"><city>济南</city><city>青岛</city><city>威海</city><city>烟台</city><city>潍坊</city></province><province name="湖北省"><city>武汉</city><city>广水</city><city>孝感</city><city>荆州</city><city>黄石</city><city>鄂州</city><city>黄冈</city></province>
</china> city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>二级联动</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head><body><select id="province" ><option>--请选择--</option><option value="湖北省">湖北省</option><option value="吉林省">吉林省</option><option value="辽宁省">辽宁省</option><option value="山东省">山东省</option></select><select id="city"><option>--请选择--</option></select></body><script type="text/javascript">document.getElementById("province").οnchange=function(){//当前选中的省var provinceValue=this.value; var cityNode=document.getElementById("city");//删除市下拉列表中的前一个省的城市项var cityOptions=cityNode.getElementsByTagName("option");for(var i=cityOptions.length-1;i>0;i--){cityNode.removeChild(cityOptions[i]);}var xmlDoc=parseXML("cities.xml");var xmlProvinceElements=xmlDoc.getElementsByTagName("province");//下拉列表中添加选中省的城市项 for(var i=0;i<xmlProvinceElements.length;i++){if(xmlProvinceElements[i].getAttribute("name")==provinceValue){var xmlCityElements=xmlProvinceElements[i].getElementsByTagName("city");for(var j=0;j<xmlCityElements.length;j++){var xmlCityName=xmlCityElements[j].firstChild.nodeValue; var cityOptionElement=document.createElement("option");cityOptionElement.setAttribute("value",xmlCityName);cityOptionElement.appendChild(document.createTextNode(xmlCityName));cityNode.appendChild(cityOptionElement);}break;}}}/** 加载XML文件* @param {Object} filename*/function parseXML(filename){try{ //Internet Explorer 创建一个空的xml文档xmlDoc=new ActiveXObject("Microsoft.XMLDOM");}catch(e){ // Firefox,Mozilla,Opera....try {xmlDoc=document.implementation.createsDocument("","",null);}catch(e){}}//关闭异步加载xmlDoc.async=false;//加载XML文档xmlDoc.load(filename);return xmlDoc;}</script>
</html>
