Beispiel-Tutorial zur Implementierung einer dreistufigen Verknüpfung zwischen Provinzen, Städten und Landkreisen mithilfe von jQuery

Einfache dreistufige Verknüpfung zwischen Provinzen und Gemeinden, ein Fall, der für Anfänger geeignet ist, um mit dem Lernen zu beginnen

Die Verzeichnisstruktur ist wie folgt: Dreistufige Verknüpfung.html befindet sich auf derselben Ebene wie der JS-Ordner

Die Darstellung ist wie folgt:

HTML-Code:

 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-Code:

 1 <script src=&#39;./js/jquery.min.js&#39;></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=&#39;"+value.p+"&#39;>"+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=&#39;"+value.ct+"&#39;>"+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=&#39;"+value.dt+"&#39;>"+value.dt+"</option>";53             })
              
 district.html(templateOption);55         }56 57     };58 
 //    点击省份，触动市的变化59     province.change(function(){60         
 cityFun();61     });62 //    点击市，触动地区的变化63     
 city.change(function(){64         districtFun();65     })
 })
 
 </script>

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Implementierung einer dreistufigen Verknüpfung zwischen Provinzen, Städten und Landkreisen mithilfe von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!