js 解析xml文件实现省市级联下拉菜单
? js 解析xml文件实现省市级联下拉菜单
?
写一个省市的XML文档
? city.xml
?? <!--EndFragment-->
<?xml version="1.0" encoding="UTF-8"?><cities> <province name="北京"> <city>大兴</city> <city>海淀</city> <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> <province name="陕西"> <city>西安</city> <city>咸阳</city> <city>铜川</city> <city>渭南</city> <city>汉中</city> <city>商洛</city> <city>延安</city> </province></cities>
???
?
?
?
???? city.html
??
?
???
?????
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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><h1>解析xml文件实现省市级联下拉单</h1><div><span> <select id="province" name="province"><option>请选择省</option></select> </span><span> <select id="cities" name="city"><option>请选择相应省下面的市</option></select> </span><span> <select id="counties" name="county"><option>请选择相应市下面的县</option></select> </span></div></body></html>
???
?
?
??? javascript
??
?
?????
<script>window.onload = function() {var xmlDom;try {//针对的是IE浏览器 创建一个空的微软 XML 文档对象xmlDom = new ActiveXObject("Microsoft.XMLDOM");} catch (err) {try {//在 Firefox 及其他浏览器中的 XML 解析器//创建一个空的 XML 文档对象。 xmlDom = document.implementation.createDocument("", "", null);} catch (e) {}}//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行xmlDom.async = "false";//解析器加载名为 "xxx.xml" 的 XML 文档、xmlDom.load("city.xml");//获取xml文件的根节点var root = xmlDom.documentElement;//获取根节点下面的省节点var provinces = root.childNodes;var province = document.getElementById("province");for ( var i = 0; i < provinces.length; i++) {//获取省节点的name属性的值var name = provinces[i].getAttribute("name");//创建一个optionvar opt = document.createElement("option");//为option添加文本opt.appendChild(document.createTextNode(name));//添加到父节点中province.appendChild(opt);}var cities = document.getElementById("cities");province.onchange = function() { var pce = document.getElementById("province");var opts = pce.options;var opt1 = opts[pce.selectedIndex];var name = opt1.innerHTML;for ( var i = 0; i < provinces.length; i++) {//获取省节点的name属性的值var name1 = provinces[i].getAttribute("name");if (name == name1) { cities.length=1;//每次改变的时候清空var pros = provinces[i];var citys = pros.childNodes;for ( var j = 0; j < citys.length; j++) {//创建一个optionvar opt1 = document.createElement("option");//为option添加文本opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));//添加到父节点中cities.appendChild(opt1);}}}}}</script>????
**存在的问题是?，只能在IE浏览器中打开，望哪位高手解决兼容性！
<!--EndFragment--> 1 楼 zhangwe415 2011-03-21 IE和firefox中XML解析的方式是不同的 一样菜鸟 给点意见 2 楼 LeeYee 2011-03-23 看下这个：http://blog.csdn.net/oxcow/archive/2010/09/12/5878872.aspx 3 楼 smallsnake 2011-03-23 呵呵，建议将XML换成Json对象，那前台解析起来就方便多了，并且没有游览器限制