zoukankan      html  css  js  c++  java

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


    [html]     view plaincopy在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    2. <html>  
    3.   <head>  
    4.     <title>menu2level.html</title>  
    5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    6.     <script type="text/javascript">  
    7.         function loadXML(){  
    8.         var xmlDoc;  
    9.             try{  
    10.             //IE  
    11.              xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  
    12.             }catch(e){  
    13.                 try{  
    14.                 xmlDoc = document.implementation.createDocument("","",null);  
    15.                 }catch(e){  
    16.                 alert(e.message);  
    17.                 return;  
    18.                 }  
    19.             }  
    20.             xmlDoc.async=false;  
    21.             xmlDoc.load("cities.xml");  
    22.             return xmlDoc;  
    23.         }  
    24.         //网页加载完在加载  完成省份加载  
    25.         onload=function(){  
    26.             var xmlDocument = loadXML();  
    27.             var provinceArr =xmlDocument.getElementsByTagName("province");  
    28.             var proSize = provinceArr.length;  
    29.             for(var i=0;i<proSize;i++){  
    30.                 //创建option节点  
    31.                 var optionElement = document.createElement("option");  
    32.                 var provinceName = provinceArr[i].getAttribute("name");  
    33.                 //创建文本节点  
    34.                 var textElement =document.createTextNode(provinceName);  
    35.                 optionElement.appendChild(textElement);  
    36.                 optionElement.setAttribute("value", provinceName);  
    37.                 var node = document.getElementById("province");  
    38.                 node.appendChild(optionElement);  
    39.             }     
    40.         }  
    41.         //省份改变事件  
    42.         function changeProvince(node){  
    43.             //获取选择的角标  
    44.             var index = node.selectedIndex;  
    45.             //获取对应的省份名  
    46.             var provinceName = node.options[index].value;  
    47.             loadCities(provinceName);  
    48.         }  
    49.           
    50.         //根据省份编号加载城市信息  
    51.         function loadCities(proName){  
    52.             var xmlDocument = loadXML();  
    53.             var provinceArr =xmlDocument.getElementsByTagName("province");  
    54.             //获取城市的元素  
    55.             var citySelectEle = document.getElementById("cities");  
    56.             var size = citySelectEle.options.length;  
    57.             for(var i=size;i>0;i--){  
    58.                 citySelectEle.remove(i);  
    59.             }  
    60.               
    61.             //获取省份的个数  
    62.             var proSize = provinceArr.length;  
    63.             var proElement;  
    64.             //获取对应的省份元素  
    65.             for(var i=0;i<proSize;i++){  
    66.                 if(provinceArr[i].getAttribute("name")==proName){  
    67.                     proElement = provinceArr[i];  
    68.                     break;  
    69.                 }  
    70.             }  
    71.             //获取省份的城市信息  
    72.             var citiesArr = proElement.getElementsByTagName("city");  
    73.             var len = citiesArr.length;  
    74.             for(var i=0;i<len;i++){  
    75.                 //创建option节点  
    76.                 var optionElement = document.createElement("option");  
    77.                 //获取城市名  
    78.                 var cityName = citiesArr[i].firstChild.nodeValue;  
    79.                 //创建文本节点  
    80.                 var textElement =document.createTextNode(cityName);  
    81.                 optionElement.appendChild(textElement);  
    82.                 optionElement.setAttribute("value", cityName);  
    83.                 citySelectEle.appendChild(optionElement);  
    84.             }     
    85.         }  
    86.         function getValue(){  
    87.             var pro = document.getElementById("province").value;  
    88.             var city = document.getElementById("cities").value;  
    89.             alert(pro+":"+city);  
    90.         }  
    91.     </script>  
    92.   </head>  
    93.     
    94.   <body>  
    95.   <select id="province" onchange="changeProvince(this)">  
    96.     <option value="" selected="selected">--省份--</option>  
    97.   </select>  
    98.   <select id="cities">  
    99.     <option value="" selected="selected">--城市--</option>  
    100.   </select>  
    101.   <input type="button" value="弹出" onclick="getValue()"/>   
    102.   </body>  
    103. </html>  
  • 相关阅读:
    datagrid行拖拽（参考网上的相关资料）
    给定treeData,根据关键字进行过滤：显示父级元素；如果节点被选中，那它的子节点也全部被选中
    复选框
    UVA 10025 The ? 1 ? 2 ? ... ? n = k problem
    UVA10161 Ant on a Chessboard
    UVA 113 Power of Cryptography
    UVA 10785 The Mad Numerologist
    UVA 755 487-3279
    UVA10194 FootBall aka Soccer
    UVA 123 Searching Quickly 开始新的路程
  • 原文地址：https://www.cnblogs.com/baiduligang/p/4247648.html
Copyright © 2011-2022 走看看