省级联动

最新推荐文章于 2021-05-29 08:15:52 发布

money云

最新推荐文章于 2021-05-29 08:15:52 发布

阅读量409

点赞数

分类专栏： javaweb 文章标签： js

本文链接：https://blog.csdn.net/Minimum_Time_Hour/article/details/75271802

版权

javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这里写图片描述

代码如下：

<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">
        //页面中的第一个下拉的onchange事件
        document.getElementById("province").onchange = function(){
            //获取页面中选中的省份名称
            //var provinceValue = this.value;
            //1 获取页面中选中的省份名称
            var provinceValue = document.getElementById("province").value;
            //解析xml文件
            var docXml = parseXML("cities.xml");

            var cityElement = document.getElementById("city");

            //删除上一次选项中保存的城市
            var optionsOld = cityElement.getElementsByTagName("option");
            for(var z=optionsOld.length-1;z>0;z--){
                cityElement.removeChild(optionsOld[z]);
            }
            //遍历xml文件中的省份
            var provinceXmlElements = docXml.getElementsByTagName("province");
            //4 遍历xml文件中的所有省份

            for(var i=0 ; i < provinceXmlElements.length ; i++){
                var provinceXmlElement = provinceXmlElements[i];
                var provinceXmlValue = provinceXmlElement.getAttribute("name");

                if(provinceValue == provinceXmlValue){
                    //获取选中的province下的city标签
                    var cityXmlElements = provinceXmlElement.getElementsByTagName("city");
                    //遍历获取每个city标签
                    for(var j=0 ; j < cityXmlElements.length;j++){
                        //获取到一个city选项
                        var cityXmlElement = cityXmlElements[j];
                        //获取到这个city的子节点的值
                        var cityXmlValue = cityXmlElement.firstChild.nodeValue;

                        //把每个city   插入到第二个下拉选项框中

                        //创建option选项，并为其添加valule属性值
                        var optionElement = document.createElement("option");
                        optionElement.setAttribute("value",cityXmlValue);
                        //以cityXmlValue创建文本节点，并添加到Option下面
                        var cityText = document.createTextNode(cityXmlValue);
                        optionElement.appendChild(cityText);

                        cityElement.appendChild(optionElement);


                    }
                }

            }
        }
        /**
         * 跨浏览器的解析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;
        }

    </script>
</html>

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