JavaScript解析xml文件的省市联动

来源：互联网发布：淘宝系统供应商编辑：程序博客网时间：2024/05/16 17:48

cities.xml

<?xml version="1.0" encoding="GB2312"?><china>    <province name="吉林省">        <city>长春</city>        <city>吉林市</city>        <city>四平</city>        <city>松原</city>        <city>通化</city>    </province>    <province name="辽宁省">        <city>沈阳</city>        <city>大连</city>        <city>鞍山</city>        <city>抚顺</city>        <city>铁岭</city>    </province>    <province name="山东省">        <city>济南</city>        <city>青岛</city>        <city>威海</city>        <city>烟台</city>        <city>潍坊</city>    </province></china>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>    <head>        <title>test01.html</title>        <meta http-equiv="content-type" content="text/html; charset=UTF-8">    </head>    <body>        <select id="province" name="province">            <option value="">请选择....</option>            <option value="吉林省">吉林省</option>            <option value="辽宁省">辽宁省</option>            <option value="山东省">山东省</option>        </select>        <select id="city" name="city">            <option value="">请选择.....</option>        </select>    </body>    <script language="JavaScript">        /**         * 跨浏览器的解析xml文件的函数         * @param {Object} fileXmlName         */        function parseXML(fileXmlName){            var xmlDoc;                     try {//Internet Explorer  创建一个空的xml文档                xmlDoc = new ActiveXObject("Microsoft.XMLDOM");            }             catch (e) {                try {//Firefox, Mozilla, Opera, 创建一个空的xml文档                    xmlDoc = document.implementation.createDocument("", "", null);                }                 catch (e) {                }            }            //关闭异步加载            xmlDoc.async = false;            //加载xml文件            xmlDoc.load(fileXmlName);            return xmlDoc;        }        //页面中第一个下拉选的onchange事件        document.getElementById("province").onchange = function(){            //1 获取页面中选中的省份名称            var provinceValue = document.getElementById("province").value;            //2.解析xml文件            var docXml = parseXML("cities.xml");            //3.遍历xml文件中的省份            var provinceXmlElements = docXml.getElementsByTagName("province");            //清空            /*             * <select id="city" name="city">                    <option value="">请选择.....</option>                    <option value="长春">长春</option>                </select>             */            var cityElement = document.getElementById("city");            var optionsOld = cityElement.getElementsByTagName("option");//          for(var z=1;z<optionsOld.length;){//              cityElement.removeChild(optionsOld[z]);//          }            for(var z=optionsOld.length-1;z>0;z--){                cityElement.removeChild(optionsOld[z]);            }            //4 遍历xml文件中的所有省份            for(var i = 0;i<provinceXmlElements.length;i++){                var provinceXmlElement = provinceXmlElements[i];                var provinceXmlValue = provinceXmlElement.getAttribute("name");                //5 判断页面中的省份名称与xml文件中的省份是否一致                if (provinceValue == provinceXmlValue) {                    //6 如果一致，读取对应省份的所有城市信息                    var cityXmlElements = provinceXmlElement.getElementsByTagName("city");                    for(var j=0;j<cityXmlElements.length;j++){                        var cityXmlElement = cityXmlElements[j];                        var cityXmlValue = cityXmlElement.firstChild.nodeValue;                        //7 插入到页面中的第二个下拉选中                        /*                         * <select id="city" name="city">                                <option value="">请选择.....</option>                                <option value="长春">长春</option>                            </select>                         */                        var optionElement = document.createElement("option");                        optionElement.setAttribute("value",cityXmlValue);                        var cityText = document.createTextNode(cityXmlValue);                        optionElement.appendChild(cityText);                        cityElement.appendChild(optionElement);                    }                }            }        }    </script></html>

0 0