jQuery简单的省市区县三级联动案例
简单的省市区三级联动，适合初学者入门学习的案例
目录结构如下： 三级联动.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>
