你的位置:首页 > Java教程

[Java教程]省市区三级联动


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

<!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>