首页 > 代码库 > jQuery简单的省市区县三级联动案例

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=http://www.mamicode.com/‘./js/jquery.min.js‘></script>"color: #008080"> 2 <script type="text/javascript">
 3 $(function(){
 4 //    JSON文件放的位置,根据你放的位置更改
 5     var url = ‘./js/district.json‘;
 6 //    JSON数据为数组,将返回的值赋值给areaData,一次性请求完成
 7     var areaData = http://www.mamicode.com/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 =http://www.mamicode.com/ data;
17         provinceFun();
18     })
19 //    省份
20     var provinceFun = function(){
21         $.each(areaData,function(index,value){
22             templateOption += "<option value=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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=http://www.mamicode.com/‘"+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>

 

jQuery简单的省市区县三级联动案例