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

Posted 2020-09-22 笑笑~上善若水

简单的省市区三级联动，适合初学者入门学习的案例

目录结构如下： 三级联动.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>