网站地图    收藏   

主页 > 前端 > javascript >

JavaScript XML省市县三级联动下拉菜单

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 以前我们写的都是把省市县写在了js数组中然后再讲出来,那样的如果有更新就很麻烦了,下面我介绍一个xml+js实现的省市县三级联动下拉菜单效果,大家可参考。...

js代码

 代码如下 复制代码
<html>
<head runat="server">
    <title>省市县三级联动菜单</title>
            <script   language="javascript"   type="text/javascript">
  //首先需要初始化
  var   xmlDoc;  
  var   nodeIndex;
  function   getxmlDoc()  
  {  
      xmlDoc=new   ActiveXObject("Microsoft.XMLDOM");  
          var   currNode;  
          xmlDoc.async=false;  
          xmlDoc.load("Area.xml");  
          if(xmlDoc.parseError.errorCode!=0)  
          {  
                  var   myErr=xmlDoc.parseError;  
                  alert("出错!"+myErr.reason);  
          }          
  }
  function Init()
  {
    //打开xlmdocm文档
    getxmlDoc();
    var   dropElement1=document.getElementById("Select1");
    var   dropElement2=document.getElementById("Select2");
    var   dropElement3=document.getElementById("Select3");  
    RemoveDropDownList(dropElement1);
    RemoveDropDownList(dropElement2);
    RemoveDropDownList(dropElement3);
    var  TopnodeList=xmlDoc.selectSingleNode("address").childNodes;
    if(TopnodeList.length>0)
    {
        //省份列表
        var country;
        var province;
        var city;
        for(var   i=0; i<TopnodeList.length;   i++)
        {
              //添加列表项目
              country=TopnodeList[i];      
              var   eOption=document.createElement("option");  
              eOption.value=country.getAttribute("name");
              eOption.text=country.getAttribute("name");
              dropElement1.add(eOption);
        }
        if(TopnodeList[0].childNodes.length>0)
        {
            //城市列表
            for(var i=0;i<TopnodeList[0].childNodes.length;i++)
            {
               var   id=dropElement1.options[0].value;
               //默认为第一个省份的城市
               province=TopnodeList[0];
               var   eOption=document.createElement("option"); 
               eOption.value=province.childNodes[i].getAttribute("name");  
               eOption.text=province.childNodes[i].getAttribute("name");  
               dropElement2.add(eOption);
            }
            if(TopnodeList[0].childNodes[0].childNodes.length>0)
            {
               //县列表
               for(var i=0;i<TopnodeList[0].childNodes[0].childNodes.length;i++)
               {
                  var   id=dropElement2.options[0].value;
                  //默认为第一个城市的第一个县列表
                  city=TopnodeList[0].childNodes[0]; 
                  var   eOption=document.createElement("option"); 
                  eOption.value=city.childNodes[i].getAttribute("name");  
                  eOption.text=city.childNodes[i].getAttribute("name");  
                  this.document.getElementById("Select3").add(eOption);
               }
            }
        }
    }
  }  
  function   selectCity()  
  {       var   dropElement1=document.getElementById("Select1");
          var   name=dropElement1.options[dropElement1.selectedIndex].value;
          //alert(id);
          var   countryNodes=xmlDoc.selectSingleNode('//address/province [@name="'+name+'"]');  
          //alert(countryNodes.childNodes.length);
          var   province=document.getElementById("Select2");      
          var   city=document.getElementById("Select3");      
          RemoveDropDownList(province);  
          RemoveDropDownList(city);
          if(countryNodes.childNodes.length>0)
          {
               //填充城市         
               for(var   i=0;   i<countryNodes.childNodes.length;   i++)  
               {  
                  var   provinceNode=countryNodes.childNodes[i];    
                  var   eOption=document.createElement("option");  
                  eOption.value=provinceNode.getAttribute("name");  
                  eOption.text=provinceNode.getAttribute("name");  
                  province.add(eOption);  
               }
               if(countryNodes.childNodes[0].childNodes.length>0)
               {
                  //填充选择省份的第一个城市的县列表
                  for(var i=0;i<countryNodes.childNodes[0].childNodes.length;i++)
                  {
                      //alert("i="+i+"rn"+"length="+countryNodes.childNodes[0].childNodes.length+"rn");
                      var   dropElement2=document.getElementById("Select2");
                      var   dropElement3=document.getElementById("Select3");
                      //取当天省份下第一个城市列表
                      var cityNode=countryNodes.childNodes[0];
                      //alert(cityNode.childNodes.length);
                      var   eOption=document.createElement("option"); 
                      eOption.value=cityNode.childNodes[i].getAttribute("name");  
                      eOption.text=cityNode.childNodes[i].getAttribute("name");  
                      dropElement3.add(eOption);
                  }
               }
          }
  }  
  function   selectCountry()  
  {  
          var   dropElement2=document.getElementById("Select2");  
          var   name=dropElement2.options[dropElement2.selectedIndex].value;  
          var   provinceNode=xmlDoc.selectSingleNode('//address/province/city[@name="'+name+'"]');  
          var   city=document.getElementById("Select3");      
          RemoveDropDownList(city);  
          for(var   i=0;   i<provinceNode.childNodes.length;   i++)  
          {  
                  var   cityNode=provinceNode.childNodes[i];    
                  var   eOption=document.createElement("option");  
                  eOption.value=cityNode.getAttribute("name");  
                  eOption.text=cityNode.getAttribute("name");  
                  city.add(eOption);  
          }  
  }  
  function   RemoveDropDownList(obj)  
  {  
      if(obj)
      {
          var   len=obj.options.length;  
          if(len>0)
          {
            //alert(len);  
            for(var   i=len;i>=0;i--)  
            {  
                  obj.remove(i);  
            }
          }
       }
           
  }  
  </script> 
</head>
<body onload="Init();">
    <form id="form1" runat="server">
    <div>
    <select id="Select1" name="Select1" runat="server" onchange="selectCity();">
   <option value="" selected="true">省/直辖市</option>
 </select>
    <select id="Select2" name="Select2" runat="server" onchange="selectCountry()">
  <option value="" selected="true">请选择</option>
 </select>
    <select id="Select3" name="Select3" runat="server" >
  <option value="" selected="true">请选择</option>
 </select>
    </div>
    </form>
</body>
</html>

xml文件

 

 代码如下 复制代码
<?xml version="1.0" encoding="gb2312" ?>
 <address>
 <province name="北京市">
 <city name="北京辖区">
  <country name="东城区" />
  <country name="西城区" />
  <country name="崇文区" />
  <country name="宣武区" />
  <country name="朝阳区" />
  <country name="丰台区" />
  <country name="石景山区" />
  <country name="海淀区" />
  <country name="门头沟区" />
  <country name="房山区" />
  <country name="通州区" />
  <country name="顺义区" />
  <country name="昌平区" />
  <country name="大兴区" />
  <country name="怀柔区" />
  <country name="平谷区" />
  </city>
 <city name="北京辖县">
  <country name="密云县" />
  <country name="延庆县" />
  </city>
  </province>
 <province name="天津市">
 <city name="天津辖区">
  <country name="和平区" />
  <country name="河东区" />
  <country name="河西区" />
  <country name="南开区" />
  <country name="河北区" />
  <country name="红桥区" />
  <country name="塘沽区" />
  <country name="汉沽区" />
  <country name="大港区" />
  <country name="东丽区" />
  <country name="西青区" />
  <country name="津南区" />
  <country name="北辰区" />
  <country name="武清区" />
  <country name="宝坻区" />
  </city>
   <province name="台湾省" />
  <province name="香港特区" />
  <province name="澳门特区" />
 </address>

这里我只加了几个城市更多城市大家可以按这xml规则自己来加哦。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论