php 三级联动 带后台,省市区的三级联动

摘要：                

         &nbs三级联动省市区

*{margin:0;padding:0;}

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

//创建元素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='请选择市'

city.innerHTML=option;

sele.appendChild(city);

//创建区select选择框

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

area.className='area';

var option='请选择区'

area.innerHTML=option;

sele.appendChild(area);

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

var address=new Array();

$(function(){

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

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

var option='请选择省';

$.each(res,function(i){

option+=''+res[i].province+'';

})

//console.log(option);

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

})

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

$p=$('

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

var $sprovince=$('');

var $scity=$('');

var $sarea=$('');

$('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='请选择市';

$.each(res,function(i){

//通过ID对应关系判断

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

optionCity+=''+res[i].cityName+'';

}

})

$('.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='请选择区';

$.each(res,function(i){

//通过ID对应关系判断

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

optionArea+=''+res[i].areaName+'';

}

})

$('.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());

})

})

//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

},

{

批改老师：天蓬老师批改时间：2019-08-16 09:47:25

老师总结：这样的三级联动非常有用, 也很常用 , 目前有非常多的第三方插件可以使用, 也有一些公开的地址接口可以调用,非常方便