javascript实现二级省级联动

来源：互联网发布：好听的傣族网络歌曲编辑：程序博客网时间：2024/05/17 22:18

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>

0 0