Blog / 阅读

javascript配合xml制作二级联动菜单

by admin on 2014-03-16 22:32:35 in ,



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>menu2level.html</title>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <script type="text/javascript">  
        function loadXML(){  
        var xmlDoc;  
            try{  
            //IE  
             xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  
            }catch(e){  
                try{  
                xmlDoc = document.implementation.createDocument("","",null);  
                }catch(e){  
                alert(e.message);  
                return;  
                }  
            }  
            xmlDoc.async=false;  
            xmlDoc.load("cities.xml");  
            return xmlDoc;  
        }  
        //网页加载完在加载  完成省份加载  
        onload=function(){  
            var xmlDocument = loadXML();  
            var provinceArr =xmlDocument.getElementsByTagName("province");  
            var proSize = provinceArr.length;  
            for(var i=0;i<proSize;i++){  
                //创建option节点  
                var optionElement = document.createElement("option");  
                var provinceName = provinceArr[i].getAttribute("name");  
                //创建文本节点  
                var textElement =document.createTextNode(provinceName);  
                optionElement.appendChild(textElement);  
                optionElement.setAttribute("value", provinceName);  
                var node = document.getElementById("province");  
                node.appendChild(optionElement);  
            }     
        }  
        //省份改变事件  
        function changeProvince(node){  
            //获取选择的角标  
            var index = node.selectedIndex;  
            //获取对应的省份名  
            var provinceName = node.options[index].value;  
            loadCities(provinceName);  
        }  
          
        //根据省份编号加载城市信息  
        function loadCities(proName){  
            var xmlDocument = loadXML();  
            var provinceArr =xmlDocument.getElementsByTagName("province");  
            //获取城市的元素  
            var citySelectEle = document.getElementById("cities");  
            var size = citySelectEle.options.length;  
            for(var i=size;i>0;i--){  
                citySelectEle.remove(i);  
            }  
              
            //获取省份的个数  
            var proSize = provinceArr.length;  
            var proElement;  
            //获取对应的省份元素  
            for(var i=0;i<proSize;i++){  
                if(provinceArr[i].getAttribute("name")==proName){  
                    proElement = provinceArr[i];  
                    break;  
                }  
            }  
            //获取省份的城市信息  
            var citiesArr = proElement.getElementsByTagName("city");  
            var len = citiesArr.length;  
            for(var i=0;i<len;i++){  
                //创建option节点  
                var optionElement = document.createElement("option");  
                //获取城市名  
                var cityName = citiesArr[i].firstChild.nodeValue;  
                //创建文本节点  
                var textElement =document.createTextNode(cityName);  
                optionElement.appendChild(textElement);  
                optionElement.setAttribute("value", cityName);  
                citySelectEle.appendChild(optionElement);  
            }     
        }  
        function getValue(){  
            var pro = document.getElementById("province").value;  
            var city = document.getElementById("cities").value;  
            alert(pro+":"+city);  
        }  
    </script>  
  </head>  
    
  <body>  
  <select id="province" onchange="changeProvince(this)">  
    <option value="" selected="selected">--省份--</option>  
  </select>  
  <select id="cities">  
    <option value="" selected="selected">--城市--</option>  
  </select>  
  <input type="button" value="弹出" onclick="getValue()"/>   
  </body>  
</html>  
 
效果如下:
   
cities.xml文件如下:
<?xml version="1.0" encoding="UTF-8"?>  
<xml-body>  
    <province name="陕西">  
        <city>西安</city>  
        <city>汉中</city>  
        <city>宝鸡</city>  
        <city>延安</city>  
    </province>  
    <province name="广东">  
        <city>佛山</city>  
        <city>深圳</city>  
        <city>广州</city>  
        <city>汕头</city>  
    </province>  
    <province name="辽宁">  
        <city>大连</city>  
        <city>铁岭</city>  
        <city>鞍山</city>  
        <city>抚顺</city>  
    </province>  
</xml-body>  


写评论

相关文章

上一篇:AJAX使用简单介绍

下一篇:HTML字符实体(Character Entities),转义字符串(Escape Sequence) 为什么要用转义字符串?

评论

写评论

* 必填.

分享

栏目

赞助商


热门文章

Tag 云