[JavaScript]解析XML动态获取省份市区

最新推荐文章于 2021-05-27 07:41:42 发布

Jia的博客

最新推荐文章于 2021-05-27 07:41:42 发布

阅读量4.3k

点赞数 1

分类专栏： JavaScript 文章标签： javascript javaweb mysql jQuary android

本文链接：https://blog.csdn.net/Konaji/article/details/50801452

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

示例:

源码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        /*
            注:
                1 : 示例中不支持谷歌浏览器解析
                2 : 清空市级所有列表时,要永远根据数组的第一个下标清空下拉列表数组

                    例如:
                    for (var i = 0; i < cityLength; i++) {
                        city.removeChild(cityItems[0]);
                    }
        */
        window.onload = function () {
            //选择省份后,onchange事件
            document.getElementById("province").onchange = function () {
                //解析XML
                var xmlDoc = parseXML("city.xml");
                //通过xmlDoc解析XML中province标签,返回值为数组
                var provinces = xmlDoc.getElementsByTagName("province");
                //获取下拉列表选中的值
                var selectValue = this.value;
                //获取市级的下拉列表
                var city = document.getElementById("city");
                //获取市级的所有列表
                var cityItems = city.getElementsByTagName("option");
                //获取市级列表的长度
                var cityLength = cityItems.length;

                //清空市级的所有列表
                for (var i = 0; i < cityLength; i++) {
                    //注:数组长度下标一定要写为0!! 每删除一个元素,下一个元素就成会为第一个
                    city.removeChild(cityItems[0]);
                }

                //在HTML中新建一个<option>下拉列表
                var option = document.createElement("option");
                //在HTML中新建一个文本节点
                var text = document.createTextNode("请选择市区");
                //在下拉列表中添加节点
                option.appendChild(text);
                city.appendChild(option);

                //遍历XML子节点并在HTML添加对应的市级
                for (var i = 0; i < provinces.length; i++) {
                    //获取XML单个节点
                    var province = provinces[i];
                    //获取XML中<province>的name对应的值
                    var provinceName = province.getAttribute("name");
                    if (selectValue==provinceName) {
                        //alert(selectValue+"-------"+provinceName);
                        //获取该省的所有市,返回值为数组
                        var citys = province.getElementsByTagName("city");
                        //alert("citys.length="+citys.length);
                        for (var i = 0; i < citys.length; i++) {
                            //获取XML中每个<city>的文本内容
                            var text = citys[i].childNodes[0].nodeValue;
                            //在HTML中新建一个<option>下拉列表
                            var optionElement = document.createElement("option");
                            //在HTML中新建一个文本节点
                            var textElement = document.createTextNode(text);
                            //在下拉列表中添加节点
                            optionElement.appendChild(textElement);
                            city.appendChild(optionElement);
                        }
                    }
                }
            };


            //跨浏览器解析XML,返回值为XML文档对象
            function parseXML(fileXmlName) {
                var xmlDoc = null ;
                try {
                    //IE加载
                    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                } catch (e) {
                    try {
                        //火狐等浏览器加载
                        xmlDoc = document.implementation.createDocument("","",null);
                    } catch (e) {
                        //谷歌浏览器加载
                        /*var xmlhttp = new window.XMLHttpRequest(); 
                        xmlhttp.open("GET",fileXmlName,false); 
                        xmlhttp.send(null); 
                        if(xmlhttp.readyState == 4){ 
                        xmlDoc = xmlhttp.responseXML.documentElement; 
                        }*/
                    }
                }

                //关闭异步加载
                xmlDoc.async = false ;
                //加载xml文件
                xmlDoc.load(fileXmlName);
                //返回XML文档对象
                return xmlDoc;
            }
        }

    </script>
</head>
<body>
<select name="province" id="province">
    <option value="">请选择省份</option>
    <option value="河北省">河北省</option>
    <option value="湖南省">湖南省</option>
    <option value="浙江省">浙江省</option>
    <option value="北京市">北京市</option>
</select>
<select name="city" id="city">
    <option value="">请选择市区</option>
</select>
</body>
</html>