abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>省市区ajax三级联动</title>
<script src="../common/js/jquery-3.3.1.js"></script>
</head>
<body>
<h3>省市区,ajax三级联动</h3>
省:<select name="" id="pro">
<option value=""></option>
</select>
市:<select name="" id="city"></select>
区:<select name="" id="area"></select>
<script>
$(function(){
$.ajax({
type:'post',
url:'./php/pro.json',
dataType:'json',
data:'',
success:function(data){
let option = '<option value="">选择(省)</option>';
$.each(data,function(key,val){
option += '<option value="'+data[key].proId+'">'+data[key].proName+'</option>';
})
$('#pro').html(option);
// $('option[value=""]').remove();
}
})
//选择市
$('#pro').change(function(){
$('#pro option[value=""]').remove();
console.log($('#pro option:selected').text());
$.ajax({
type:'post',
url:'./php/city.json',
dataType:'json',
data:'',
success:function(data){
console.log(data);
let option = '<option value="">选择(市)</option>';
$.each(data,function(index){
if(data[index].proId == $('#pro').val()){
option += '<option value="'+data[index].cityId+'">'+data[index].cityName+'</option>'
}
})
$('#city').html(option);
}
})
})
//选择区
$('#city').change(function(){
$('#city option[value=""]').remove();
console.log($('#city option:selected').text());
$.ajax({
type:'post',
url:'./php/area.json',
dataType:'json',
data:'',
success:function(data){
console.log(data);
let option = '<option value="">选择(区)</option>';
$.each(data,function(index){
if(data[index].cityId == $('#city').val()){
option += '<option value="'+data[index].areaId+'">'+data[index].areaName+'</option>'
}
})
$('#area').html(option);
}
})
})
})
</script>
</body>
</html>
Correcting teacher:天蓬老师Correction time:2018-12-24 09:14:45
Teacher's summary:不知道是你是否真的搞明白了, 不过,从作业来看,你没有放上数据部分, 也没有截图