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>
JS code:
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 }) district.html(templateOption);55 }56 57 };58 // 点击省份,触动市的变化59 province.change(function(){60 cityFun();61 });62 // 点击市,触动地区的变化63 city.change(function(){64 districtFun();65 }) }) </script>
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!