abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport&
<!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>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
区 <select name="" id="area"></select>
</body>
<script src="./js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$.getJSON('js/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('js/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>';
}
});
$('#city').html(option);
});
});
$('#city').change(function () {
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
$.getJSON('js/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);
});
});
$('#area').change(function () {
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
});
})
</script>
</html>
AJAX 提供的接口更方便
Correcting teacher：天蓬老师Correction time：2019-09-29 19:35:20
Teacher's summary：三联联动, 其实有许多第三方插件的, 但是了解其原理 , 还是有必要的