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>
? <province name="河北省" postcode="130000" >
??? <city name="石家庄市" postcode="130100" >
??????? <area name="长安区" postcode="130102" />
??????? <area name="桥东区" postcode="130103" />
??????? <area name="桥西区" postcode="130104" />
??????? <area name="新华区" postcode="130105" />
??????? <area name="井陉矿区" postcode="130107" />
??????? <area name="裕华区" postcode="130108" />
??????? <area name="井陉县" postcode="130121" />
??????? <area name="正定县" postcode="130123" />
??????? <area name="栾城县" postcode="130124" />
??????? <area name="行唐县" postcode="130125" />
??????? <area name="灵寿县" postcode="130126" />
??????? <area name="高邑县" postcode="130127" />
??????? <area name="深泽县" postcode="130128" />
??????? <area name="赞皇县" postcode="130129" />
??????? <area name="无极县" postcode="130130" />
??????? <area name="平山县" postcode="130131" />
??????? <area name="元氏县" postcode="130132" />
??????? <area name="赵县" postcode="130133" />
??????? <area name="辛集市" postcode="130181" />
??????? <area name="藁城市" postcode="130182" />
??????? <area name="晋州市" postcode="130183" />
??????? <area name="新乐市" postcode="130184" />
??????? <area name="鹿泉市" postcode="130185" />
??? </city>
??? <city name="唐山市" postcode="130200" >
??????? <area name="路南区" postcode="130202" />
??????? <area name="路北区" postcode="130203" />
??????? <area name="古冶区" postcode="130204" />
??????? <area name="开平区" postcode="130205" />
??????? <area name="丰南区" postcode="130207" />
??????? <area name="丰润区" postcode="130208" />
??????? <area name="滦县" postcode="130223" />
??????? <area name="滦南县" postcode="130224" />
??????? <area name="乐亭县" postcode="130225" />
??????? <area name="迁西县" postcode="130227" />
??????? <area name="玉田县" postcode="130229" />
??????? <area name="唐海县" postcode="130230" />
??????? <area name="遵化市" postcode="130281" />
??????? <area name="迁安市" postcode="130283" />
??? </city>
??? <city name="秦皇岛市" postcode="130300" >
??????? <area name="海港区" postcode="130302" />
??????? <area name="山海关区" postcode="130303" />
??????? <area name="北戴河区" postcode="130304" />
??????? <area name="青龙满族自治县" postcode="130321" />
??????? <area name="昌黎县" postcode="130322" />
??????? <area name="抚宁县" postcode="130323" />
??????? <area name="卢龙县" postcode="130324" />
??? </city>
??? <city name="邯郸市" postcode="130400" >
??????? <area name="邯山区" postcode="130402" />
??????? <area name="丛台区" postcode="130403" />
??????? <area name="复兴区" postcode="130404" />
??????? <area name="峰峰矿区" postcode="130406" />
??????? <area name="邯郸县" postcode="130421" />
??????? <area name="临漳县" postcode="130423" />
??????? <area name="成安县" postcode="130424" />
??????? <area name="大名县" postcode="130425" />
??????? <area name="涉县" postcode="130426" />
??????? <area name="磁县" postcode="130427" />
??????? <area name="肥乡县" postcode="130428" />
??????? <area name="永年县" postcode="130429" />
??????? <area name="邱县" postcode="130430" />
??????? <area name="鸡泽县" postcode="130431" />
??????? <area name="广平县" postcode="130432" />
??????? <area name="馆陶县" postcode="130433" />
??????? <area name="魏县" postcode="130434" />
??????? <area name="曲周县" postcode="130435" />
??????? <area name="武安市" postcode="130481" />
??? </city>
??? <city name="邢台市" postcode="130500" >
??????? <area name="桥东区" postcode="130502" />
??????? <area name="桥西区" postcode="130503" />
??????? <area name="邢台县" postcode="130521" />
??????? <area name="临城县" postcode="130522" />
??????? <area name="内丘县" postcode="130523" />
??????? <area name="柏乡县" postcode="130524" />
??????? <area name="隆尧县" postcode="130525" />
??????? <area name="任县" postcode="130526" />
??????? <area name="南和县" postcode="130527" />
??????? <area name="宁晋县" postcode="130528" />
??????? <area name="巨鹿县" postcode="130529" />
??????? <area name="新河县" postcode="130530" />
??????? <area name="广宗县" postcode="130531" />
??????? <area name="平乡县" postcode="130532" />
??????? <area name="威县" postcode="130533" />
??????? <area name="清河县" postcode="130534" />
??????? <area name="临西县" postcode="130535" />
??????? <area name="南宫市" postcode="130581" />
??????? <area name="沙河市" postcode="130582" />
??? </city>
??? <city name="保定市" postcode="130600" >
??????? <area name="新市区" postcode="130602" />
??????? <area name="北市区" postcode="130603" />
??????? <area name="南市区" postcode="130604" />
??????? <area name="满城县" postcode="130621" />
??????? <area name="清苑县" postcode="130622" />
??????? <area name="涞水县" postcode="130623" />
??????? <area name="阜平县" postcode="130624" />
??????? <area name="徐水县" postcode="130625" />
??????? <area name="定兴县" postcode="130626" />
??????? <area name="唐县" postcode="130627" />
??????? <area name="高阳县" postcode="130628" />
??????? <area name="容城县" postcode="130629" />
??????? <area name="涞源县" postcode="130630" />
??????? <area name="望都县" postcode="130631" />
??????? <area name="安新县" postcode="130632" />
??????? <area name="易县" postcode="130633" />
??????? <area name="曲阳县" postcode="130634" />
??????? <area name="蠡县" postcode="130635" />
??????? <area name="顺平县" postcode="130636" />
??????? <area name="博野县" postcode="130637" />
??????? <area name="雄县" postcode="130638" />
??????? <area name="涿州市" postcode="130681" />
??????? <area name="定州市" postcode="130682" />
??????? <area name="安国市" postcode="130683" />
??????? <area name="高碑店市" postcode="130684" />
??? </city>
??? <city name="张家口市" postcode="130700" >
??????? <area name="桥东区" postcode="130702" />
??????? <area name="桥西区" postcode="130703" />
??????? <area name="宣化区" postcode="130705" />
??????? <area name="下花园区" postcode="130706" />
??????? <area name="宣化县" postcode="130721" />
??????? <area name="张北县" postcode="130722" />
??????? <area name="康保县" postcode="130723" />
??????? <area name="沽源县" postcode="130724" />
??????? <area name="尚义县" postcode="130725" />
??????? <area name="蔚县" postcode="130726" />
??????? <area name="阳原县" postcode="130727" />
??????? <area name="怀安县" postcode="130728" />
??????? <area name="万全县" postcode="130729" />
??????? <area name="怀来县" postcode="130730" />
??????? <area name="涿鹿县" postcode="130731" />
??????? <area name="赤城县" postcode="130732" />
??????? <area name="崇礼县" postcode="130733" />
??? </city>
??? <city name="承德市" postcode="130800" >
??????? <area name="双桥区" postcode="130802" />
??????? <area name="双滦区" postcode="130803" />
??????? <area name="鹰手营子矿区" postcode="130804" />
??????? <area name="承德县" postcode="130821" />
??????? <area name="兴隆县" postcode="130822" />
??????? <area name="平泉县" postcode="130823" />
??????? <area name="滦平县" postcode="130824" />
??????? <area name="隆化县" postcode="130825" />
??????? <area name="丰宁满族自治县" postcode="130826" />
??????? <area name="宽城满族自治县" postcode="130827" />
??????? <area name="围场满族蒙古族自治县" postcode="130828" />
??? </city>
??? <city name="沧州市" postcode="130900" >
??????? <area name="新华区" postcode="130902" />
??????? <area name="运河区" postcode="130903" />
??????? <area name="沧县" postcode="130921" />
??????? <area name="青县" postcode="130922" />
??????? <area name="东光县" postcode="130923" />
??????? <area name="海兴县" postcode="130924" />
??????? <area name="盐山县" postcode="130925" />
??????? <area name="肃宁县" postcode="130926" />
??????? <area name="南皮县" postcode="130927" />
??????? <area name="吴桥县" postcode="130928" />
??????? <area name="献县" postcode="130929" />
??????? <area name="孟村回族自治县" postcode="130930" />
??????? <area name="泊头市" postcode="130981" />
??????? <area name="任丘市" postcode="130982" />
??????? <area name="黄骅市" postcode="130983" />
??????? <area name="河间市" postcode="130984" />
??? </city>
??? <city name="廊坊市" postcode="131000" >
??????? <area name="安次区" postcode="131002" />
??????? <area name="广阳区" postcode="131003" />
??????? <area name="固安县" postcode="131022" />
??????? <area name="永清县" postcode="131023" />
??????? <area name="香河县" postcode="131024" />
??????? <area name="大城县" postcode="131025" />
??????? <area name="文安县" postcode="131026" />
??????? <area name="大厂回族自治县" postcode="131028" />
??????? <area name="霸州市" postcode="131081" />
??????? <area name="三河市" postcode="131082" />
??? </city>
??? <city name="衡水市" postcode="131100" >
??????? <area name="桃城区" postcode="131102" />
??????? <area name="枣强县" postcode="131121" />
??????? <area name="武邑县" postcode="131122" />
??????? <area name="武强县" postcode="131123" />
??????? <area name="饶阳县" postcode="131124" />
??????? <area name="安平县" postcode="131125" />
??????? <area name="故城县" postcode="131126" />
??????? <area name="景县" postcode="131127" />
??????? <area name="阜城县" postcode="131128" />
??????? <area name="冀州市" postcode="131181" />
??????? <area name="深州市" postcode="131182" />
??? </city>
? </province>
</root>
?
由于文件太长这里就写这几个省吧
?
city.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
??? <title>city.html</title>
?
??? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
??? <meta http-equiv="description" content="this is my page">
??? <meta http-equiv="content-type" content="text/html; charset=UTF-8">
??? <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
? </head>
? <body>
??? <div>
??? <span><select id="sheng" style="width: 100px"><option>?
??? ?请选择省
??? </option></select></span>
??? <span><select id="shi" style="width: 100px">
??? <option>
??请选择相应市
?</option>
??? </select></span>
??? <span><select id="xian" style="width: 100px">
??? <option>
??请选择相应区
?</option>
??? </select></span>
??? </div>
? </body>
</html>
<script type="text/javascript">
<!--
function getXmlDoc() {
?var xmldoc;
?try{
?? //IE浏览器
??xmlDoc = new ActiveXObject("microsoft.XMLDOM");
?}catch(e){
??try{
???//firefox 其他浏览器
???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"));
???//添加省道页面dom对象中
???sheng.appendChild(shengopt);
??}
?}
?//当省节点发生改变时 触发事件
?sheng.onchange = function() {
??//获取省节点所有的option对象的集合
??var shengs = sheng.options;
??//获取选中option对象的selectedIndex(下标值)
??var num = shengs.selectedIndex;
??//清空市 区?? ?
??shi.length = 1;
??xian.length = 1;
??var ppostocode = shengs[num].getAttribute("value");
??//遍历所有的省
??for(var i=0;i<provinces.length;i++) {
??? //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
???if(provinces[i].nodeType == 1) {
????var postcode = provinces[i].getAttribute("postcode");
????if(postcode == ppostocode) {
?????var cities = provinces[i].childNodes;
?????shi.length = 1;
?????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 = 1;
???????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>
<!--
DOM 解析中的浏览器差异所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。
重要的区别有两点：
1、加载 XML 的方式
?//IE浏览器
???? var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
?//firefox 其他浏览器
??? var xmlDoc = document.implementation.createDocument("","",null);
2、处理空白和换行的方式
? Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。
? 思考: 那么怎么解决这种差异呢，下面是一种方法：
?? for(var i=0;i<provinces.length;i++){ //在输出所有的子节点的时候
?????? if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点
????????? }
??? }
? 要注意的是: xmlDoc.async = false; 写成这样? IE? ， fireFox 都可以
? ???xmlDoc.async = "false";? IE? 可以? fireFox 会报错
?-->