JavaScript解析xml文件的省市联动

最新推荐文章于 2021-05-26 08:12:24 发布

阅读量702

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cckevincyh/article/details/53130697

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

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>

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript解析xml文件的省市联动

cities.xml<?xml version="1.0" encoding="GB2312"?><china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通化</ci
复制链接

扫一扫