Dom解析XML文件实现省市县三级下拉菜单的实现

 Dom解析XML文件实现省市县三级下拉菜单的实现

今天回顾了一下javascript，并用Dom解析XML文件实现省市县三级下拉菜单的实现。

在这当中解决了oper 、firefox等等浏览器的兼容问题。在oper11+浏览器中要设置一下浏览器才能兼容。

如图：

 

在oper 地址栏中输入 ：“about：config” ，会出现首选项编辑器。在user “Prefs“中

把“Allow File XMLHttpRequest“勾选上才行。

Java效果实现如图：

 

下面是如何实现省市县三级菜单联动js代码：

 

   注意：详细代码在附件中并带有xml文件.

<script type="text/javascript"> function getdoc() { var xmldoc; try { xmldoc = new ActiveXObject("Microsoft.XMLDOM"); } catch (err) { try { xmldoc = document.implementation.createDocument("", "", null); } catch (e) { alert("您的浏览器实在是太低........"); } } xmldoc.async = false; xmldoc.load("city.xml"); return xmldoc; } window.onload = function() { var xmldoc = getdoc(); var root = xmldoc.documentElement; var pro = root.childNodes; var sheng = document.getElementById("pros"); var shi = document.getElementById("citys"); var xian = document.getElementById("areas"); for ( var i = 0; i < pro.length; i++) { if (pro[i].nodeType == 1) { var shengopt = document.createElement("option"); shengopt.appendChild(document.createTextNode(pro[i].getAttribute("name"))); shengopt.setAttribute("value", pro[i].getAttribute("postcode")); sheng.appendChild(shengopt); if(pro[i].getAttribute("postcode")=="100000"){ var cname=pro[i].childNodes; for(var j=0;j<cname.length;j++){ var cityopt = document.createElement("option"); cityopt.appendChild(document.createTextNode(cname[j].getAttribute("name"))); cityopt.setAttribute("value", cname[j].getAttribute("postcode")); shi.appendChild(cityopt); var xname=pro[i].childNodes; for(var k=0;k<cname.length;k++){ var xianopt = document.createElement("option"); xianopt.appendChild(document.createTextNode(xname[k].getAttribute("name"))); xianopt.setAttribute("value", xname[k].getAttribute("postcode")); xian.appendChild(xianopt); } } } } } sheng.onchange = function() { var shengs = sheng.options; var num = shengs.selectedIndex; shi.length=1; xian.length=1; var ppo = shengs[num].getAttribute("value"); for ( var i = 0; i < pro.length; i++) { if (pro[i].nodeType == 1) { var pos = pro[i].getAttribute("postcode"); shi.length=1; if (pos==ppo) { var cities = pro[i].childNodes; for ( var j = 0; j < cities.length; j++) { if(cities[j].nodeType ==1){ var shiopt = document.createElement("option"); shiopt.appendChild(document.createTextNode(cities[j].getAttribute("name"))); shiopt.setAttribute("value", cities[j].getAttribute("postcode")); shi.appendChild(shiopt); } } break; } } } } shi.onchange = function() { var shis = shi.options; var num = shis.selectedIndex; var spo = shis[num].getAttribute("value"); for ( var i = 0; i < pro.length; i++) { if (pro[i].nodeType == 1) { var citys = pro[i].childNodes; for ( var j = 0; j < citys.length; j++) { if (citys[j].nodeType == 1) { var opss = citys[j].getAttribute("postcode"); if (opss == spo) { xian.length=1; var areas = citys[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>