兼容性好的省市三级级联菜单


最近又教js代码把以前的省市级联改的完美了一些

本代码的特点:
1 兼容性好 (IE FF)
2 不使用服务器端技术
3 地区数据与显示逻辑相分离(xml数据)
4 数据标准,齐全(国土资源部数据)


文件如下 address.html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>Address</title>
  6. </head>
  7. <script type="text/javascript" language="javascript" src="address.js"></script>
  8. <body>

  9. <form id="form1" name="form1" method="post" action="">
  10.         省:<select name="province"><option value="">请选择...</option></select>
  11.         市:<select name="city"><option value="">请选择...</option></select>
  12.         区:<select name="county"><option value="">请选择...</option></select>
  13. </form>

  14. </body>
  15. </html>

address.js
  1. // JavaScript Document
  2. // 加载xml文档




  3. //runxml
  4. window.onload = init;


  5. //xmlDocument
  6. var xmlDoc = null;

  7. //province element
  8. var p;
  9. //city element
  10. var c;


  11. function init(){
  12.     p = document.getElementById('form1').province;
  13.     c = document.getElementById('form1').city;
  14.     ct = document.getElementById('form1').county;
  15.     p.onchange = getCity;
  16.     c.onchange = getCounty;
  17.     initProvince();
  18.     
  19. }





  20. function loadXML(xmlFile){
  21.     var xmlDoc;
  22.     if(window.ActiveXObject){//for ie
  23.         xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
  24.     }
  25.     else if (document.implementation&&document.implementation.createDocument){//for moz
  26.         xmlDoc = document.implementation.createDocument(''''null);
  27.     }
  28.     else{
  29.         alert('xml read ERROR!');
  30.         return null;
  31.     }
  32.     xmlDoc.async = false;
  33.     xmlDoc.preserveWhiteSpace = false;
  34.     xmlDoc.load(xmlFile);
  35.     return xmlDoc;
  36. }



  37. function initProvince(){
  38.     if(xmlDoc == null){
  39.         xmlDoc = loadXML('GBT2260-1999.xml');   
  40.     }
  41.     
  42.     var provinces = xmlDoc.getElementsByTagName("province");
  43.     
  44.     //alert(provinces.length);
  45.     
  46.     
  47.     while(p.options.length > 1){
  48.         p.removeChild(p.options.item(1));   
  49.     }

  50.     for(var i = 0; i<provinces.length; i++){
  51.         var oOption = document.createElement("option");
  52.         //oOption.innerHTML = provinces[i].getAttribute('name');
  53.         oOption.appendChild(document.createTextNode(provinces[i].getAttribute('name')));
  54.         oOption.value = provinces[i].getAttribute('code');
  55.         p.appendChild(oOption); 
  56.     }
  57. }



  58. function getCity(){

  59.     while(c.options.length > 1){
  60.         c.removeChild(c.options.item(1));   
  61.     }
  62.     
  63.     while(ct.options.length > 1){
  64.         ct.removeChild(ct.options.item(1)); 
  65.     }
  66.     
  67.     var name = p.options[p.selectedIndex].value;
  68.     
  69.     //ie work! but moz fail!
  70.     //var pro = xmlDoc.selectSingleNode("//province[@name='"+name+"']");//xpath
  71.     
  72.     
  73.     //ugly method but can work!
  74.     var pro = null;
  75.     var provinces = xmlDoc.getElementsByTagName("province");
  76.     for(var k = 0; k < provinces.length; k++){
  77.         if(provinces[k].getAttribute('code') == name){
  78.             pro = provinces[k];
  79.             break;
  80.         }
  81.     }
  82.     
  83.     if(pro!=null){
  84.         var citys = pro.getElementsByTagName("city");
  85.         if(citys != null){
  86.             for(var i = 0; i<citys.length; i++){
  87.                 var oOption = document.createElement("option");
  88.                 //oOption.innerHTML = citys[i].getAttribute('name');
  89.                 oOption.appendChild(document.createTextNode(citys[i].getAttribute('name')));
  90.                 oOption.value = citys[i].getAttribute('code');
  91.                 c.appendChild(oOption); 
  92.             }
  93.         }
  94.     }
  95. }


  96. function getCounty(){
  97.     while(ct.options.length > 1){
  98.         ct.removeChild(ct.options.item(1)); 
  99.     }
  100.     var name = c.options[c.selectedIndex].value;
  101.     
  102.     //ie work! but moz fail!
  103.     //var pro = xmlDoc.selectSingleNode("//province[@name='"+name+"']");//xpath
  104.     
  105.     
  106.     //ugly method but can work!
  107.     var pro = null;
  108.     var citys = xmlDoc.getElementsByTagName("city");
  109.     for(var k = 0; k < citys.length; k++){
  110.         if(citys[k].getAttribute('code') == name){
  111.             pro = citys[k];
  112.             break;
  113.         }
  114.     }
  115.     
  116.     if(pro!=null){
  117.         var countys = pro.getElementsByTagName("county");
  118.         if(countys != null){
  119.             for(var i = 0; i<countys.length; i++){
  120.                 var oOption = document.createElement("option");
  121.                 //oOption.innerHTML = citys[i].getAttribute('name');
  122.                 oOption.appendChild(document.createTextNode(countys[i].getAttribute('name')));
  123.                 oOption.value = countys[i].getAttribute('code');
  124.                 ct.appendChild(oOption);    
  125.             }
  126.         }
  127.     }
  128.     
  129. }


   GBT2260-1999.xml 标准数据太多,请到空间下载 完整代码

如下为运行效果

兼容性好的省市三级级联菜单_第1张图片



请到空间下载 完整代码

你可能感兴趣的:(JavaScript,xml,服务器,null,文档,action)