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

標籤：dom   三級   color   沒有   htm   null   width   padding   顯示   

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

目錄結構如下： 三級聯動.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>

 

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