abstract：<!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
},
{
Correcting teacher：天蓬老师Correction time：2019-08-16 09:47:25
Teacher's summary：这样的三级联动非常有用, 也很常用 , 目前有非常多的第三方插件可以使用, 也有一些公开的地址接口可以调用,非常方便