省市区三级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>省市区三级联动</title>
</head>
<body>
省：<select name="" id="pro"> </select>
市：<select name="" id="city"></select>
区县：<select name="" id="area"></select>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script>
$(function() {
$.getJSON("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("2.json",function (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>';
}
})
$('#pro').html(option);
})
})
$('#city').change(function(){
console.log($(this).find('.selected').text());
$.getJSON("3.json",function (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>
</body>
</html>