省市区三级联动

当我们注册一个网站，会看到省市区三级联动，下面简单介绍一下

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
   
 </head>
 <body>
<select id="province" onChange="ck()" >
        <option>--请选择--</option>
      </select>
      
      <select id="city"> 
        <option>--请选择--</option>
      </select>
      
      <select id="san">
        <option>--请选择--</option>
      </select>
  
  
 </body>
  <script type="text/javascript">
        
        

     
 //======================================第一种方法：获取省市二级联菜单=============================

 //获取省的id
 var prame= document.getElementById("province");
 var city= document.getElementById("city");
var san= document.getElementById("san");

 //创建省市数组
 var cityList=new Array();

     //创建另一个数组
    var zushu=new Array;
   
      cityList['江西省'] = ['南昌市','抚州市','上饶市','鹰潭市','丰城市','吉安市'];
      cityList['河南省'] = ['郑州市','洛阳市'];
      cityList['湖北省'] = ['武汉市','宜昌市'];
      cityList['福建省'] = ['福州市','三明市','佛山市'];

     zushu['南昌市']=['南昌县','青云谱区','莲塘镇'];
     zushu['抚州市']=['临川区','云山镇','唱凯镇'];

     for(var i in cityList){
        
        prame.add(new Option(i,i),null);
     }
        prame.onchange=function(){
        var prame= document.getElementById("province").value;
        var city= document.getElementById("city");
        
        city.options.length=0;
        for(var k in cityList[prame]){
             city.add(new Option(cityList[prame][k],cityList[prame][k]),null);
            

    }
    
    
  }


  city.onchange=function(){

     var city= document.getElementById("city").value;
       var san= document.getElementById("san");
        
        san.options.length=0;
        for(var k in zushu[city]){
             san.add(new Option(zushu[city][k]),(zushu[city][k]),null);
            

    }
    
    
  }

  
</script>


 <!--------------------------------第二种方法：三级联动菜单----------------------
 <script type="text/javascript">
 
                //获取省的id
          var province=document.getElementById("province");
        
             province.add(new Option("江西省","江西省"),null);
             province.add(new Option("福建省","福建省"),null);
           province.add(new Option("广东省","广东省"),null);
         function ck(){
               
             var city=document.getElementById("city");
                var num=province.selectedIndex;
                city.options.length=0;
   
       switch(num){
           case 1:
             city.add(new Option("南昌市","南昌市"),null);
             city.add(new Option("抚州市","抚州市"),null);
          city.add(new Option("上饶市","上饶市"),null);
             city.add(new Option("吉安市","吉安市"),null);
             break;
             
            case 2:
             city.add(new Option("厦门市","厦门市"),null);
             city.add(new Option("三明市","三明市"),null);
          city.add(new Option("莆田市","莆田市"),null);
             city.add(new Option("龙岩市","龙岩市"),null);
             break;
          
           case 3:
             city.add(new Option("广州市","广州市"),null);
             city.add(new Option("东莞市","东莞市"),null);
          city.add(new Option("保定市","保定市"),null);
             city.add(new Option("珠海市","珠海市"),null);
             break;
               } 
            
            var qu=document.getElementById("qu");
           var num1=province.selectedIndex;
           qu.options.length=0;
           switch(num1){
           case 1:
             qu.add(new Option("临川区","临川区"),null);
             qu.add(new Option("青云谱区","青云谱区"),null);
          qu.add(new Option("南昌镇","南昌镇"),null);
             qu.add(new Option("云山镇","云山镇"),null);
             break;
             
            case 2:
            qu.add(new Option("保安县","保安县"),null);
            qu.add(new Option("福田区","福田区"),null);
         qu.add(new Option("将乐县","将乐县"),null);
            qu.add(new Option("厦门区","厦门区"),null);
             break;
          
          case 3:
            qu.add(new Option("广上县","光上县"),null);
            qu.add(new Option("西莞区","西莞区"),null);
         qu.add(new Option("三海县","三海县"),null);
            qu.add(new Option("广岛区","广岛区"),null);
             break;
               } 
    
     } 





 </script>-->


</html>

 

posted on 2015-05-13 16:22  梦之航  阅读(460)  评论(0)  编辑  收藏  举报

导航