欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery实现省市区县三级联动的实例教程

程序员文章站 2022-04-18 11:08:30
...
简单的省市区三级联动,适合初学者入门学习的案例

目录结构如下: 三级联动.html 跟 JS文件夹是同个级别

jQuery实现省市区县三级联动的实例教程

效果图如下:

jQuery实现省市区县三级联动的实例教程

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

以上就是jQuery实现省市区县三级联动的实例教程的详细内容,更多请关注其它相关文章!