使用javascript中读取Xml文件做成的一个二级联动菜单

[html]view
 plaincopy

<!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>