<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三级联动城市</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
省: <select id="pro"></select>
市: <select id="city"></select>
区/县: <select id="area"></select>
<script type="text/javascript">
$(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() {
$('[value=""]').remove();
let option = '<option value="">请选择(市)</option>';
let proVal = parseInt($(this).val());
$.getJSON('2.json',function(data) {
$.each(data,function(i){
if(data[i].proId == proVal) {
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
}
})
$('#city').html(option);
})
})
// 城市改变事件
$('#city').change(function(){
$('[value=""]').remove();
let option = '<option value="">请选择(区/县)</option>';
let cityVal = parseInt($(this).val());
console.log(cityVal)
$.getJSON('3.json',function(data) {
$.each(data,function(i){
if(data[i].cityId == cityVal) {
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
}
})
$('#area').html(option);
})
})
})
</script>
</body>
</html>
