JavaScript解析xml文件的省市联动

cities.xml


<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>    

<html>
    <head>
        <title>test01.htmltitle>
        <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");

            //清空
            /*
             * 
             */
            var cityElement = document.getElementById("city");
            var optionsOld = cityElement.getElementsByTagName("option");
//          for(var z=1;z
//              cityElement.removeChild(optionsOld[z]);
//          }

            for(var z=optionsOld.length-1;z>0;z--){
                cityElement.removeChild(optionsOld[z]);
            }
            //4 遍历xml文件中的所有省份
            for(var i = 0;ivar provinceXmlElement = provinceXmlElements[i];

                var provinceXmlValue = provinceXmlElement.getAttribute("name");
                //5 判断页面中的省份名称与xml文件中的省份是否一致
                if (provinceValue == provinceXmlValue) {
                    //6 如果一致,读取对应省份的所有城市信息
                    var cityXmlElements = provinceXmlElement.getElementsByTagName("city");
                    for(var j=0;jvar cityXmlElement = cityXmlElements[j];

                        var cityXmlValue = cityXmlElement.firstChild.nodeValue;

                        //7 插入到页面中的第二个下拉选中
                        /*
                         * 
                         */
                        var optionElement = document.createElement("option");
                        optionElement.setAttribute("value",cityXmlValue);
                        var cityText = document.createTextNode(cityXmlValue);
                        optionElement.appendChild(cityText);

                        cityElement.appendChild(optionElement);

                    }
                }
            }
        }




    script>
html>

你可能感兴趣的:(JavaScript)