Home > Web Front-end > JS Tutorial > An example tutorial on how to implement three-level linkage between provinces, cities and counties using jQuery

An example tutorial on how to implement three-level linkage between provinces, cities and counties using jQuery

零下一度
Release: 2017-06-26 10:22:36
Original
1336 people have browsed it

Simple three-level linkage between provinces and municipalities, a case suitable for beginners to learn

The directory structure is as follows: Three-level linkage.html is at the same level as the JS folder

The rendering is as follows:

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>
Copy after login

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>
Copy after login

The above is the detailed content of An example tutorial on how to implement three-level linkage between provinces, cities and counties using jQuery. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template