javascript实现二级省级联动

最新推荐文章于 2021-12-25 15:32:00 发布

李武杨

最新推荐文章于 2021-12-25 15:32:00 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签： javascript internet explorer 浏览器异步 firefox

本文链接：https://blog.csdn.net/liwuyang2013/article/details/18918097

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1,准备省级信息：cities.xml

<?xml version="1.0" encoding="UTF-8"?>
<china>
    <province id="hunan" name="湖南省">
        <city>长沙市</city>
        <city>株洲市</city>
        <city>湘潭市</city>
        <city>吉首市</city>
        <city>张家界</city>
    </province>
    <province id="jilin" name="吉林省">
        <city>长春</city>
        <city>吉林市</city>
        <city>四平</city>
        <city>松原</city>
        <city>通化</city>
    </province>
    <province id="liaoning" name="辽宁省">
        <city>沈阳</city>
        <city>大连</city>
        <city>鞍山</city>
        <city>抚顺</city>
        <city>铁岭</city>
    </province>
    <province id="shandong" name="山东省">
        <city>济南</city>
        <city>青岛</city>
        <city>威海</city>
        <city>烟台</city>
        <city>潍坊</city>
    </province>
</china>

2,XML 文件解析器- 跨浏览器：util.js

/**
 * Created by lwuyang on 14-2-4.
 */
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;
}

3,页面实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>省级联动</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="util.js"></script>
</head>
<body>
    <select id="province" name="province">
        <option value="">请选择...</option>
        <option value="湖南省">湖南省</option>
        <option value="吉林省">吉林省</option>
        <option value="辽宁省">辽宁省</option>
        <option value="山东省">山东省</option>
    </select>
    <select id="city" name="city">
        <option value="">请选择...</option>
    </select>
</body>
<script type="text/javascript" language="JavaScript">
    document.getElementById("province").onchange = function(){
        //清空
        var cityEle = document.getElementById("city");
        var optionEles = cityEle.getElementsByTagName("option");
        for(var z = optionEles.length -1; z>0;z--){
            cityEle.removeChild(optionEles[z]);
        }

        //1，获取页面选中的身份消息
        var provinceValue = this.value;
        //2，解析xml文件
        var docXml = parseXML("cities.xml");
        //3,获取xml文件中的所有省份信息
        var provinceXmlEles = docXml.getElementsByTagName("province");
        //4,遍历xml文件中的省份
        for(var i = 0; i < provinceXmlEles.length;i++){
            //获取省份
            var provinceXmlEle = provinceXmlEles[i];
            var provinceXmlValue = provinceXmlEle.getAttribute("name");
            // 5，判断选中的省份和provinceXmlValue是否一致
            if(provinceValue == provinceXmlValue){
                //6, 获取对应的城市信息
                var cityXmlEles = provinceXmlEle.getElementsByTagName("city");
//                alert(cityXmlEles.length);
                //7，遍历城市信息
                for(var j = 0 ; j < cityXmlEles.length; j++){
                    var cityXmlEle = cityXmlEles[j];
//                    alert(cityXmlEle);
                    var cityXmlValue = cityXmlEle.firstChild.nodeValue;
//                    var cityXmlValue = cityXmlEle.text;//这里需要注意的是，火狐和google浏览器不支持
//                    alert(cityXmlValue);
                    //8 ,添加
                    //创建<option>元素
                    var optionEle = document.createElement("option");
                    //设置属性
                    optionEle.setAttribute("value",cityXmlValue);
                    //添加文本节点
                    var optionText = document.createTextNode(cityXmlValue);
                    optionEle.appendChild(optionText);
                    cityEle.appendChild(optionEle);
                }
            }
        }
    }
</script>
</html>