<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax实现三级联动</title>
</head>
<body>
省：<select id="pro"></select>
市：<select id="city"></select>
区县：<select id="area"></select>
<p>ggg</p>
</body>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// /$(选择器).css('属性名','属性值')
// {'属性名1':'属性值1'，'属性名2'：'属性值2'}
$(function (){
$.getJSON('../inc/1.json', function (data) {
let option = '<option value="">请选择</option>';
$.each(data,function(i){
option+='<option value="'+data[i].proId+'">'+ data[i].proName+'</option>';
})
$('#pro').html(option);
})
});
$('#pro').change(function(){
console.log($(this).find(':selected').text());//查看已选到
$.getJSON('../inc/2.json', function (data) {
console.log(2,data)
let option = '<option value="">选择市</option>';
$.each(data,function(i){
if(data[i].proId==$('#pro').val()) {
option+='<option value="'+data[i].cityId+'">'+ data[i].cityName+'</option>';
}
})
$('#city').html(option);
})
});
$('#city').change(function(){
console.log($(this).find(':selected').text());//查看已选到
$.getJSON('../inc/3.json', function (data) {
console.log(2,data)
let option = '<option value="">选择市</option>';
$.each(data,function(i){
if(data[i].cityId==$('#city').val()) {
option+='<option value="'+data[i].areaId+'">'+ data[i].areaName+'</option>';
}
})
$('#area').html(option);
})
});
</script>
</html>[ {
"proId":1,
"proName":"四川"
},
{
"proId":2,
"proName":"广西"
}
][ {
"cityId":1,
"cityName":"南宁",
"proId":2
},
{
"cityId":2,
"cityName":"钦州",
"proId":2
},
{
"cityId":3,
"cityName":"成都",
"proId":1
},
{
"cityId":4,
"cityName":"达州",
"proId":1
}
][
{
"areaId":1,
"cityId":1,
"areaName":"棉江区"
},
{
"areaId":2,
"cityId":1,
"areaName":"新区"
},
{
"areaId":3,
"cityId":2,
"areaName":"新区"
},
{
"areaId":4,
"cityId":2,
"areaName":"新区"
},
{
"areaId":5,
"cityId":3,
"areaName":"大树"
},
{
"areaId":6,
"cityId":4,
"areaName":"昆山区"
}
]![AE}}%SKKXNF]~N{Z7SCRCD2.png](http://img.php.cn//upload/image/824/212/355/1544969362433772.png "1544969362433772.png")
