ajax实现三级联动
<!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>