jQuery簡單的省市區縣三級聯動案例

簡單的省市區三級聯動，適合初學者入門學習的案例

目錄結構如下： 三級聯動.html 跟 JS文件夾是同個級別

效果圖如下：

HTML代碼：

 1 <style type="text/css">
 2     *{margin:0;padding:0;}
 3     .selectAll
 4       { width:400px;
 5          margin:100px auto;
 6       }
 7 </style>
 8 
 9 <div class="selectAll">
10     <!--省份-->
11     <select class="province">
12         <option>請選擇</option>
13     </select>
14     <!--城市-->
15     <select class="city">
16         <option>請選擇</option>
17     </select>
18     <!--地區-->
19     <select class="district">
20         <option>請選擇</option>
21     </select>
22 </div>

JS代碼：

 1 <script src='./js/jquery.min.js'></script>
 2 <script type="text/javascript">
 3 $(function(){
 4 //    JSON文件放的位置，根據你放的位置更改
 5     var url = './js/district.json';
 6 //    JSON數據為數組，將返回的值賦值給areaData，一次性請求完成
 7     var areaData = null;
 8 //    獲取到的數據用模板存放到templateOption，進行DOM重繪
 9     var templateOption = "";
10 //
11     var province = $('.province');
12     var city = $('.city');
13     var district = $('.district');
14 //    獲取JSON格式
15     $.getJSON(url,function (data) {
16         areaData = data;
17         provinceFun();
18     })
19 //    省份
20     var provinceFun = function(){
21         $.each(areaData,function(index,value){
22             templateOption += "<option value='"+value.p+"'>"+value.p+"</option>";
23         })
24         province.html(templateOption);
25         cityFun();
26     };
27 //    城市
28     var cityFun = function(){
29         templateOption = "";
30 //        獲取省份選取的索引，用get(0)是因為獲取$('.province')的第一個，即使$('.province')只有一個。下麵也一樣。
31         var p = province.get(0).selectedIndex;
32 //        根據JSON格式，獲取選取省份對應的市的數組
33         $.each(areaData[p].c,function(index,value){
34             templateOption += "<option value='"+value.ct+"'>"+value.ct+"</option>";
35         })
36 //        對城市的option選項進行重繪
37         city.html(templateOption);
38 //        城市選擇好了，觸發區縣
39         districtFun();
40     };
41 //    區縣
42     var districtFun = function(){
43         templateOption = "";
44         var p = province.get(0).selectedIndex;
45         var c = city.get(0).selectedIndex;
46 //        若區縣沒有，不顯示出來
47         if(areaData[p].c[c].d == undefined){
48             district.css('display','none');
49         }else{
50             district.css('display','inline');
51             $.each(areaData[p].c[c].d,function(index,value){
52                 templateOption += "<option value='"+value.dt+"'>"+value.dt+"</option>";
53             })
54             district.html(templateOption);
55         }
56 
57     };
58 //    點擊省份，觸動市的變化
59     province.change(function(){
60         cityFun();
61     });
62 //    點擊市，觸動地區的變化
63     city.change(function(){
64         districtFun();
65     })
66 })
67 </script>