省市区的三级联动

原创2019-08-15 11:32:1017
摘要:<!DOCTYPE html><html>                 <head>         &nbs

<!DOCTYPE html>

<html>

                 <head>

                 <title>三级联动省市区</title>

                 <link rel="stylesheet" type="text/css" href="">

                 <script src="js/jquery-3.3.1.min.js"></script>

                 <style type="text/css">

                 *{margin:0;padding:0;}

                 .sele{margin:120px auto;width:300px;}

                 </style>

                 </head>

<body>

                <script>

                 //创建元素DIV

                 var div=document.createElement('div');

                 //div设置class名

                 //div.setAttribute('class','sele');

                 div.className='sele';

                 //页面加入DIV

                 document.body.appendChild(div);

                 //创建省select选择框

                 var province=document.createElement('select');

                 //select设置class名

                 province.className='province';

                

                 //select选择框加入到div中

                 var sele=document.getElementsByClassName('sele').item(0);

                 sele.appendChild(province);

                 //创建市select选择框

                 var city=document.createElement('select');

                 city.className='city';

                 var option='<option>请选择市</option>'

                 city.innerHTML=option;

                 sele.appendChild(city);

                 //创建区select选择框

                 var area=document.createElement('select');

                 area.className='area';

                 var option='<option>请选择区</option>'

                 area.innerHTML=option;

                 sele.appendChild(area);

                 //声明在P标签显示选择的省市区的存入到数组

                 var address=new Array(); 

                

                 $(function(){

                 //打开页面加载选择的省

                 $.getJSON('js/province.json',function(res){

                                                     var option='<option>请选择省</option>';

                                                     $.each(res,function(i){

                                                                  option+='<option value='+res[i].pid+'>'+res[i].province+'</option>';

                                                       })

                                                     //console.log(option);

                                                     $('select').eq(0).html(option);

                                                })

                

                 //文档加入P标签,并设置样式

                 $p=$('<p></p>')

                 $('div').append($p);

                 var $sprovince=$('<span class="sprovince" style="color:red;margin-top:15px;display:inline-block;"></span>');

                 var $scity=$('<span class="scity" style="color:red"></span>');

                 var $sarea=$('<span class="sarea" style="color:red"></span>');

                 $('p').append($sprovince);

                 $('p').append($scity);

                 $('p').append($sarea);

                

                

                 //选择省的change事件

                 $('.province').change(function(){

                                             //已选择的省id

                                             var pid=$(this).find('option:selected').val();

                                             //已选择的省名

                                             var province=$(this).find('option:selected').text();

                                             console.log(pid);

                                             console.log(province);

                                             //加载选择省相对应的市

                                             $.getJSON('js/city.json',function(res){

                                                             var optionCity='<option value=0>请选择市</option>';

                                                                         $.each(res,function(i){

                                                                         //通过ID对应关系判断

                                                                         if(res[i].pid&&pid==res[i].pid){

                                                                                     optionCity+='<option value='+res[i].cityId+'>'+res[i].cityName+'</option>';

                                                                         }

                                                             })

                                                      $('.city').html(optionCity);

                                             })

                                             //省P标签写入值

                                             $('.sprovince').text(province);

                                             //把省的值写入到数组address中

                                             address[0]=province;

                                             })

                 //选择市的change事件

                 $('.city').change(function(){

                                             //已选择的市id

                                             var cityId=$(this).find('option:selected').val();

                                             //已选择的市名

                                             var cityName=$(this).find('option:selected').text();

                                             console.log(cityId);

                                             //加载选择市相对应的区

                                             $.getJSON('js/area.json',function(res){

                                                                         var optionArea='<option value=0>请选择区</option>';

                                                                         $.each(res,function(i){

                                                                                     //通过ID对应关系判断

                                                                                     if(cityId==res[i].cityId){

                                                                                              optionArea+='<option value='+res[i].areaId+'>'+res[i].areaName+'</option>';

                                                                                             }

                                                                         })

                                                                         $('.area').html(optionArea);

                                                         })

                                             //市P标签写入值

                                             $('.scity').text(cityName);

                                             //把市的值写入到数组address中

                                             address[1]=cityName;

                                      })

                 //选择区的change事件

                 $('.area').change(function(){

                                 //已选择的区名

                                 var areaName=$(this).find('option:selected').text();

                                 //阿悄P标签写入值

                                 $('.sarea').text(areaName);

                                 //把区的值写入到数组address中

                                 address[2]=areaName;

                                 console.log(address.toString());

                                 })

                  })

                 </script>

                 </body>

</html>


//province.json

[

             {

                     "pid":1,

                     "province":"湖北省"

             },

             {

                     "pid":2,

                     "province":"湖南省"

             }

]

//city.json

[

             {

                     "cityId":1,

                     "cityName":"武汉市",

                     "pid":1

             },

             {

                     "cityId":2,

                     "cityName":"荆州市",

                     "pid":1

             },

             {

                     "cityId":3,

                     "cityName":"潜江市",

                     "pid":1

             },

             {

                     "cityId":4,

                     "cityName":"长沙市",

                     "pid":2

             },

             {

                     "cityId":5,

                     "cityName":"益阳市",

                     "pid":2

             },

             {

                     "cityId":6,

                     "cityName":"岳阳市",

                     "pid":2

             }

]

//area.json

[

             {

             "areaId":1,

             "areaName":"汉阳区",

             "cityId":1

             },

             {

             "areaId":2,

             "areaName":"武昌区",

             "cityId":1

             },

             {

             "areaId":3,

             "areaName":"荆州区",

             "cityId":2

             },

             {

             "areaId":4,

             "areaName":"沙市区",

             "cityId":2

             },

             {

             "areaId":5,

             "areaName":"浩口区",

             "cityId":3

             },

             {

             "areaId":6,

             "areaName":"新台区",

             "cityId":3

             },

             {

             "areaId":7,

             "areaName":"芙蓉区",

             "cityId":4

             },

             {

             "areaId":8,

             "areaName":"望城区",

             "cityId":4

             },

             {

             "areaId":9,

             "areaName":"高桥区",

             "cityId":5

             },

             {

             "areaId":10,

             "areaName":"桃江区",

             "cityId":5

             },

             {

             "areaId":11,

             "areaName":"天心区",

             "cityId":6

             },

             {

批改老师:Peter-Zhu批改时间:2019-08-16 09:47:25
老师总结:这样的三级联动非常有用, 也很常用 , 目前有非常多的第三方插件可以使用, 也有一些公开的地址接口可以调用,非常方便

发布手记

热门词条

第九期线上培训班