郁闷的大象

 

省市级联

2011-05-11

省市区级联

ChromeJavaScriptJ#SafariFirefox

级联效果预览

 


1.测试页面index.html

 

Html代码 复制代码 收藏代码
  1. <html>  
  2. <head>  
  3. <title>PCC省市区级联</title>  
  4. <script type="text/javascript" src="pcc.js"></script>  
  5. <script type="text/javascript">  
  6.     load_xml(['province','city','county']);   
  7.     load_xml(['provinces','citys','countys']);   
  8. </script>  
  9. </head>  
  10. <body>  
  11. <div id="txtHint"></div>  
  12. <select id="province"></select><select id="city"></select><select id="county"></select><br/>  
  13. <select id="provinces"></select><select id="citys"></select><select id="countys"></select>  
  14. </body>  
  15. </html>  
<html>
<head>
<title>PCC省市区级联</title>
<script type="text/javascript" src="pcc.js"></script>
<script type="text/javascript">
	load_xml(['province','city','county']);
	load_xml(['provinces','citys','countys']);
</script>
</head>
<body>
<div id="txtHint"></div>
<select id="province"></select><select id="city"></select><select id="county"></select><br/>
<select id="provinces"></select><select id="citys"></select><select id="countys"></select>
</body>
</html>

 

 2.脚本pcc.js

 

Js代码 复制代码 收藏代码
  1. /****************************************************************************************************  
  2.  
  3.  JavaScript Document  
  4.  @author 陈小尼  
  5.  @version v1.2  
  6.  加载xml文档  
  7.  可以在IE6, IE5, IE7+, Firefox, Chrome, Opera, Safari浏览器运行  
  8.  使用方法：  
  9.     将代表省、市、区的select的id以数组的形式给load_xml()方法（如：load_xml(['province','city','county'])）。  
  10.  实例：  
  11.     <html>  
  12.     <head>  
  13.     <title>PCC省市区级联</title>  
  14.     <script type="text/javascript" src="pcc.js"></script>  
  15.     <script type="text/javascript">  
  16.         load_xml(['province','city','county']);  
  17.     </script>  
  18.     </head>  
  19.     <body>  
  20.     <button onclick="">LoadXml</button>  
  21.     <div id="txtHint"></div>  
  22.     <select id="province"></select><select id="city"></select><select id="county"></select>  
  23.     </body>  
  24.     </html>  
  25.    
  26.  ***************************************************************************************************/  
  27. var doc;   
  28. function load_xml(a){   
  29.     var xmldoc;   
  30.     if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari   
  31.         //alert(' code for IE7+, Firefox, Chrome, Opera, Safari');   
  32.         xmldoc=new XMLHttpRequest();   
  33.     }else {// code for IE6, IE5   
  34.         //alert(' code for IE6, IE5');   
  35.         xmldoc=new ActiveXObject("Microsoft.XMLHTTP");   
  36.     }   
  37.     xmldoc.onreadystatechange=function(){   
  38.         if (xmldoc.readyState==4){   
  39.             if( xmldoc.status==200){   
  40.                 doc =xmldoc.responseXML;   
  41.                 getProCiCo(a)   
  42.             }   
  43.         }   
  44.     }   
  45.     xmldoc.open("POST","GBT2260-1999.xml",true);   
  46.     xmldoc.send();   
  47. }   
  48.   
  49. function getProCiCo(a){   
  50.     var province=document.getElementById(a[0]);   
  51.     var city=document.getElementById(a[1]);   
  52.     var county=document.getElementById(a[2]);   
  53.     //初始化级联框   
  54.     var pro=doc.getElementsByTagName("province");   
  55.     for(i=0;i<pro.length;i++){   
  56.         var oOption=new Option(pro[i].getAttribute('name'),pro[i].getAttribute('name'));   
  57.         province.options.add(oOption);   
  58.         if(province.value==pro[i].getAttribute('name')){   
  59.             var cit=pro[i].getElementsByTagName("city");   
  60.             for(j=0;j<cit.length;j++){   
  61.                 var oOption=new Option(cit[j].getAttribute('name'),cit[j].getAttribute('name'));   
  62.                 city.options.add(oOption);   
  63.                 if(city.value==cit[j].getAttribute('name')){   
  64.                     var cou=cit[j].getElementsByTagName('county');   
  65.                     for(k=0;k<cou.length;k++){   
  66.                         var oOption=new Option(cou[k].getAttribute('name'),cou[k].getAttribute('name'));   
  67.                         county.options.add(oOption);   
  68.                     }   
  69.                 }   
  70.             }   
  71.         }   
  72.     }   
  73.     //省菜单onchange   
  74.     province.onchange=function(){   
  75.         city.options.length=null;   
  76.         county.options.length=null;   
  77.         for(i=0;i<pro.length;i++){   
  78.             if(province.value==pro[i].getAttribute('name')){   
  79.                 var cit=pro[i].getElementsByTagName("city");   
  80.                 for(j=0;j<cit.length;j++){   
  81.                     var oOption=new Option(cit[j].getAttribute('name'),cit[j].getAttribute('name'));   
  82.                     city.options.add(oOption);   
  83.                     if(city.value==cit[j].getAttribute('name')){   
  84.                         var cou=cit[j].getElementsByTagName('county');   
  85.                         for(k=0;k<cou.length;k++){   
  86.                             var oOption=new Option(cou[k].getAttribute('name'),cou[k].getAttribute('name'));   
  87.                             county.options.add(oOption);   
  88.                         }   
  89.                     }   
  90.                 }   
  91.             }   
  92.         }   
  93.     };   
  94.     //市菜单onchange   
  95.     city.onchange=function(){   
  96.         var cityval=city.value;   
  97.         city.options.length=null;   
  98.         for(i=0;i<pro.length;i++){   
  99.             if(province.value==pro[i].getAttribute('name')){   
  100.                 var cit=pro[i].getElementsByTagName("city");   
  101.                 for(j=0;j<cit.length;j++){   
  102.                     var oOption=new Option(cit[j].getAttribute('name'),cit[j].getAttribute('name'));   
  103.                     city.options.add(oOption);   
  104.                     city.value=cityval;   
  105.                     if(city.value==cit[j].getAttribute('name')){   
  106.                         county.options.length=null;   
  107.                         var cou=cit[j].getElementsByTagName('county');   
  108.                         for(k=0;k<cou.length;k++){   
  109.                             var oOption=new Option(cou[k].getAttribute('name'),cou[k].getAttribute('name'));   
  110.                             county.options.add(oOption);   
  111.                         }   
  112.                     }   
  113.                 }   
  114.             }   
  115.         }   
  116.     }   
  117. }  s

posted on 2011-12-07 16:22  郁闷的大象  阅读(360)  评论(0)  编辑  收藏  举报

导航