XML保存HTML页面的下拉列表内容

最新推荐文章于 2014-11-02 20:26:00 发布

acjymer

最新推荐文章于 2014-11-02 20:26:00 发布

阅读量760

点赞数

分类专栏： HTML+XML+JS+CSS

HTML+XML+JS+CSS 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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"); 
			//document.write("hha"); 
            return xmlDoc;  
        }  
        //网页加载完在加载  完成省份加载  
        οnlοad=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" οnchange="changeProvince(this)">  
    <option value="" selected="selected">--省份--</option>  
  </select>  
  <select id="cities">  
    <option value="" selected="selected">--城市--</option>  
  </select>  
  <input type="button" value="弹出" οnclick="getValue()"/>   
  </body>  
</body>
</html>

XML代码：

<?xml version="1.0" encoding="gb2312"?>
<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>