jQuery实现三级城市联动

来源:互联网 发布:淘宝详情页面尺寸 编辑:程序博客网 时间:2024/05/11 15:31
<div id="all">    <select id="save"></select><!-- 省级 -->    <select id="city"></select><!-- 市级 -->    <select id="area"></select><!-- 区级 --></div>
<style>    select{        width: 100px;    }    div{        width: 500px;        height: 300px;        margin:150px auto;    }</style>
<script type="text/javascript">    var arr=new Array();    //一级目录数据    var arr1=new Array("北京市","上海市","安徽省","江苏省","江浙省","山东省");     //二级目录数据      var arr2 = new Array();    arr[0]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆";    arr[1]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明";    arr[2]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州";    arr[3]="南京市,苏州市,徐州,扬州,镇江";    arr[4]="杭州市,宁波市,金华,温州";    arr[5]="济南,日照,青岛,烟台";    //三级目录数据    var  arr3=new Array();       arr3[0]=new Array();       arr3[0][0]="东城";//第一个为省 第二个为区       arr3[0][1]="西城";       arr3[0][2]="崇文";       arr3[0][3]="崇文";       arr3[1]=new Array();         arr3[1][0]="黄浦";       arr3[1][1]="卢湾";       arr3[2]=new Array();       arr3[2][0]="蜀山区,高新区,政务区,瑶海区,包河区";       arr3[2][1]="芜湖,镜湖区,无为";        $(function(){            first();            $("#save").change(function(){                second();            })            $("#city").change(function(){                third();            });        });        function first(){            var ff ="";            for(var i=0; i<arr1.length; i++){                ff = ff +'<option value="'+i+'">'+arr1[i]+'</option>';            }            $("#save").append(ff);            second();        }        function second(){            $("#city").empty();            var n=$("#save").val();            var Arr2=arr[n].split(',');            var se = "";            for(var i=0; i<Arr2.length; i++){                se = se+'<option value="'+i+'">'+Arr2[i]+'</option>';            }            $("#city").append(se);            third();        }        function third(){            $("#area").empty();            var c = $("#city").val();            var n=$("#save").val();            var Arr3=arr3[n][c].split(',');            var th = "";            for(var i=0; i<Arr3.length; i++){                th = th+'<option value="'+i+'">'+Arr3[i]+'</option>'            }            $("#area").append(th);        }    </script>