1. 程式人生 > >省市縣三級聯動 javascript 原生實現例項

省市縣三級聯動 javascript 原生實現例項

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級 省市區</title>
</head>
<body>
     <select id="pro"></select>
     <select id="city"></select>
     <select id="area"></select>

     <script>
          var arr1=['安徽','河北','浙江'];//定義省的陣列arr1
          var arr2=[['合肥','滁州','蕪湖'],['秦皇島','唐山','邯鄲'],['杭州','麗水','金華']];
             //定義市的陣列arr2

           var arr3=[[['合肥一區','合肥二區','合肥三區'],['滁州一區','滁州二區','滁州三區'],
['蕪湖一區','蕪湖二區','蕪湖三區']],[['秦皇島一區','秦皇島二區','秦皇島三區'],
['唐山一區','唐山二區','唐山三區'],['邯鄲一區','邯鄲二區','邯鄲三區']],
[['杭州一區','杭州二區','杭州三區'],['麗水一區','麗水二區','麗水三區'],
['金華一區','金華二區','金華三區']]];//定義區的陣列arr3
            var obj1=document.getElementById("pro");//獲取省的select目標
            var obj2=document.getElementById("city");//獲取市的select目標
            var obj3=document.getElementById("area");//獲取區的select目標

//設定預設顯示的省開始
             var str1="";
             for(var x=0;x<arr1.length;x++){
             str1=str1+"<option>"+arr1[x]+"</option>";
             }
             obj1.innerHTML=str1;
             //設定預設顯示的省結束

//設定預設顯示的市開始
             var str2="";
             for(vary=0;y<arr2[1].length;y++ ){
             str2=str2+"<option>"+arr2[0][y]+"</option>";
             }
             obj2.innerHTML=str2;
             //設定預設顯示的市結束

             //設定預設顯示的區開始
             var str3="";
             for(var z=0;z<arr3[1].length;z++){
             str3=str3+"<option>"+arr3[0][0][z]+"</option>";
             }
             obj3.innerHTML=str3;
             //設定預設顯示的區結束

             obj1.onchange=function(){
             var inst1=this.selectedIndex;
                    varstr4="";
                    for(var m=0;m<arr2[inst1].length;m++){
                     str4=str4+"<option>"+arr2[inst1][m]+"</option>";
                    }
                    obj2.innerHTML=str4;

                     varstr5="";
                     for(var n=0;n<arr3[inst1][0].length;n++){
                     str5=str5+"<option>"+arr3[inst1][0][n]+"</option>";
                     }
                        obj3.innerHTML=str5;

                 obj2.onchange=function(){
                  var inst2=this.selectedIndex;
                     varstr6="";
                     for(var n=0;n<arr3[inst1][inst2].length;n++){
                     str6=str6+"<option>"+arr3[inst1][inst2][n]+"</option>";
                     }
                        obj3.innerHTML=str6;
             } 
             }
     </script>
</body>
</html>