jQuery實現三級城市聯動

<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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章