解析xml文件实现省市县三级联动
解析xml文件实现省市县三级联动
我是做Java程序开发的，js省市县三级级联。
首先说一下什么是js省市县三级级联？js省市县三级级联是指，当你选择一个省的时候，程序会默认的把该省的城市列入城市的下拉列表框中，同样的，当你选择一个城市的时候，程序会默认的把该城市的县列入县的下拉列表框中。
实现js省市三级联动需要两个文件。
一、xml文件；
二、html文件；
?
下面我简单的写了一个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>
?
在这就列出北京、天津、河北的部分城市。其他省市大家可以自行完善。
接下来就是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;"></select> </span><span> <select id="shi" style="width: 100px;"></select> </span><span> <select id="xian" style="width: 100px;"></select> </span></div></body></html>
?
<script type="text/javascript"><!--//获取xmlDoc对象function getXmlDoc(){var xmlDoc; try{ //IE浏览器 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); }catch(err){ try{ //firefox 其他浏览器 xmlDoc = document.implementation.createDocument("","",null); }catch(er){ alert("您的浏览器实在是太低........"); } } //关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行 xmlDoc.async=false; //转载xml文件 xmlDoc.load("city.xml"); return xmlDoc;} /* 备注说明：不能把 getXmlDoc()方法中的代码放入到window.onload事件函数中 因为在opera11.01版本中会出现xmlDoc.async<window.onload的异常信息 XMLHttpRequest to files is disabled for security reasons.==> Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check. //为了支持opera11.01必须在服务器页面中访问. */ 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=0; xian.length=0; //根据选中的省获取其value值的内容 即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"); 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>?