1、先列举出名为city.xml的的部分省市区
<?xml version="1.0" encoding="UTF-8"?>
<root name="中国">
<province name="请选择省" postcode="100000" >
<city name="请选择市" postcode="100100" >
<area name="请选择区" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市辖区" postcode="110100" >
<area name="东城区" postcode="110101" />
<area name="西城区" postcode="110102" />
<area name="崇文区" postcode="110103" />
<area name="宣武区" postcode="110104" />
<area name="朝阳区" postcode="110105" />
<area name="丰台区" postcode="110106" />
<area name="石景山区" postcode="110107" />
<area name="海淀区" postcode="110108" />
<area name="门头沟区" postcode="110109" />
<area name="房山区" postcode="110111" />
<area name="通州区" postcode="110112" />
<area name="顺义区" postcode="110113" />
<area name="昌平区" postcode="110114" />
<area name="大兴区" postcode="110115" />
<area name="怀柔区" postcode="110116" />
<area name="平谷区" postcode="110117" />
</city>
<city name="县" postcode="110200" >
<area name="密云县" postcode="110228" />
<area name="延庆县" postcode="110229" />
</city>
</province>
<province name="天津市" postcode="120000" >
<city name="市辖区" postcode="120100" >
<area name="和平区" postcode="120101" />
<area name="河东区" postcode="120102" />
<area name="河西区" postcode="120103" />
<area name="南开区" postcode="120104" />
<area name="河北区" postcode="120105" />
<area name="红桥区" postcode="120106" />
<area name="塘沽区" postcode="120107" />
<area name="汉沽区" postcode="120108" />
<area name="大港区" postcode="120109" />
<area name="东丽区" postcode="120110" />
<area name="西青区" postcode="120111" />
<area name="津南区" postcode="120112" />
<area name="北辰区" postcode="120113" />
<area name="武清区" postcode="120114" />
<area name="宝坻区" postcode="120115" />
</city>
<city name="县" postcode="120200" >
<area name="宁河县" postcode="120221" />
<area name="静海县" postcode="120223" />
<area name="蓟县" postcode="120225" />
</city>
</province>
............ //此处省略
</root>
2、把city.xml放在WebRoot下，然后在WebRoot下建一个city.html
具体代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city.html</title>
</head>
<body>
<div>
<span> <select id="sheng" style="width: 100px">
</select> </span>
<span> <select id="shi" style="width: 100px">
</select> </span>
<span><select id="xian" style="width: 100px">
</select> </span>
</div>
</body>
</html>
//用javaScript实现
<script type="text/javascript">
//获取xmlDoc对象
function getXmlDoc() {
var xmlDoc;
try {
//用IE浏览器加载xml
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} catch (err) {
try {
//用其它的浏览器加载xml
xmlDoc = document.implementation.createDocument("", "", null);
} catch (er) {
alert("您的浏览器实在是太低........");
}
}
//关闭异步加载，确保在文档完全加载之前解析器会继续脚本的执行
xmlDoc.async = false;
//加载xml文档
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload = function() {
//通过方法获得对象
var xmlDoc = getXmlDoc();
//获取xml中的根节点
var root = xmlDoc.documentElement;
//获取所有点 省节点
var provinces = root.childNodes;
//获取页面中要显示的省的空件dom的对象
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
var xian = document.getElementById("xian");
//遍历所有的省
for ( var i = 0; i < provinces.length; i++) {
//查看该节点是否是元素节点
if (provinces[i].nodeType == 1) {
//创建option节点
var shengopt = document.createElement("option");
//为省节点添加文本节点
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//为省节点添加属性
shengopt.setAttribute("value", provinces[i].getAttribute("postcode"));
//添加到省中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时 触发事件
sheng.onchange = function() {
//获取省节点的所有option对象 的集合
var shengs = sheng.options
//获取选项中option对象的selectedIndex；
var num = shengs.selectedIndex;
//清空市县
shi.length = 0;
xian.length = 0;
// 获取xml文件中 的postcode对象的值
var ppostcode = shengs[num].getAttribute("value");
//遍历所有的市
for ( var i = 0; i < provinces.length; i++) {
//查看该元素节点是否是元素节点
if (provinces[i].nodeType == 1) {
var postcode = provinces[i].getAttribute("postcode");
//判断从页面中得到的postcode与从xml中得到的postcode是否相等
if (postcode == ppostcode) {
//通过省得到市的所有的节点
var cities = provinces[i].childNodes;
//清空市的节点
shi.length = 0;
for ( var i = 0; i < cities.length; i++) {
//判断是否是元素节点
if (cities[i].nodeType == 1) {
var shiopt = document.createElement("option");
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
//设置市的属性
shiopt.setAttribute("value", cities[i].getAttribute("postcode"));
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange= function() {
var shis = shi.options;
var num = shis.selectedIndex;
var spostcode = shis[num].getAttribute("value");
for ( var i = 0; i<provinces.length; i++){
if (provinces[i].nodeType == 1) {
var cities = provinces[i].childNodes;
for ( var j = 0; j < cities.length; j++) {
if (cities[j].nodeType == 1) {
var postcode = cities[j].getAttribute("postcode");
if (postcode == spostcode) {
xian.length = 0;
var areas = cities[j].childNodes;
for ( var k = 0; k < areas.length; k++) {
if (areas[k].nodeType == 1) {
var xianopt=document.createElement("option");
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
xianopt.setAttribute("value", areas[k].getAttribute("postcode"));
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>
注意事项：
1、使用opera11.01版本会出现bug
在这里对于opera11.01版本中进行采用本地访问时即输入的地址是：
file://D:/Workspaces/MyEclipse 8.6/20110322/WebRoot/city1.html,会出现如下bug(但对于opera11版本以下的就不存在此问题):
XMLHttpRequest to files is disabled for security reasons.
Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
解决方案是：
1、打开opera浏览器,在地址栏中输入:about:cofig
2、在列举的首选项编辑器中找到: User Prefs
3、点击打开User Prefs 找到里边的:Allow File XMLHttpRequest并勾选
4、勾选上之后点击下面的保存按钮即可解决此bug;
备注：但如果采用的是http://localhost:8080/20110322/city1.html也没有此bug.
2、处理空白和换行的方式
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。那么怎么解决这种差异呢？
for(var i=0;i<provinces.length;i++){
/*解决方案:在输出所有的子节点的时候在这里判断该节点是否是元素节点
*如果是元素节点就继续操作,否则直接进入下一个循环即可解决。
*/
if(provinces[i].nodeType==1){
}
}