菜鸟提问，如何使用Javascript和xml实现三级联动菜单

参考:http://www.cnblogs.com/liqiang665/archive/2007/09/25/905181.html

解决方案 »

  1.   

    <html>
      <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312" />
        <title>XML三级联动</title>
      </head>
      <body>
      <select id="pro" onchange="getCity(this.value)"></select>
      <select id="city" onchange="getCountry(this.value)"></select>
      <select id="country"></select>
      </body>
    </html>
    <script>
    function getCity(v)
    {
      var FirstId="";
      var city=document.getElementById("city");
      city.options.length=0;
      for(var i=0;i<City[v].length;i++)
      {
        if(i==0)
          FirstId=City[v][i].value;
        city.options.add(City[v][i]);
      }
      getCountry(FirstId);
    }
    function getCountry(v)
    {
      var c=document.getElementById("country");
      c.options.length=0;
      for(var i=0;i<Country[v].length;i++)
      {
        c.options.add(Country[v][i]);
      }
    }
    var doc;
    window.onload=function()
    {
      if(document.implementation&&document.implementation.createDocument)
      {
        doc=document.implementation.createDocument('','',null);
        doc.onload=handler;
        doc.load("three.xml");
      }
      else if(window.ActiveXObject)
      {
        doc=new ActiveXObject("Microsoft.XMLDOM");
        doc.onreadystatechange=function(){if(doc.readyState==4)handler();}
        doc.load("three.xml");
      }
      else alert("XML创建出错！");
    }
    var City=[];
    var Country=[];
    function handler()
    {
       var pro=document.getElementById("pro");
       var city=document.getElementById("city");
       var country=document.getElementById("country");
       var ps=doc.getElementsByTagName("prov");
       var Init=true;
       for(var i=0;i<ps.length;i++)
       {
          var value1=ps[i].getAttribute("id");
          var txt1=ps[i].getAttribute("text");
          pro.options.add(new Option(txt1,value1));
          var citys=ps[i].getElementsByTagName("city");
          City[value1]=new Array();
          for(var j=0;j<citys.length;j++)
          {
             var value2=citys[j].getAttribute("id");
             var txt2=citys[j].getAttribute("text");
             var op1=new Option(txt2,value2);
             City[value1].push(op1);
             if(Init)
               city.options.add(op1);
             Country[value2]=new Array();
             var countrys=citys[j].getElementsByTagName("county");
             for(var k=0;k<countrys.length;k++)
             {
                var value3=countrys[k].getAttribute("id")
                var txt3=countrys[k].getAttribute("text")
                var op2=new Option(txt3,value3);
                if(Init)
                  country.options.add(op2);
                Country[value2].push(op2);
             }                    
          }
          Init=false;
       }
    }
    </script>