abstract:
ajax三级联动
省
市
区
$(function () {
$.getJSON('js/1.json', function (data) {
let option = '';
$.each(data, function (i) {
option += '';
});
$('#pro').html(option);
});
$('#pro').change(function () {
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
$.getJSON('js/2.json', function (data) {
let option = '';
$.each(data, function (i) {
if (data[i].proId == $('#pro').val()) {
option += '';
}
});
$('#city').html(option);
});
});
$('#city').change(function () {
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
$.getJSON('js/3.json', function (data) {
let option = '';
$.each(data, function (i) {
if (data[i].cityId == $('#city').val()) {
option += '';
}
});
$('#area').html(option);
});
});
$('#area').change(function () {
//查看当前选择中元素内容
console.log($(this).find(':selected').text());
});
})
AJAX 提供的接口更方便
Correcting teacher:天蓬老师Correction time:2019-09-29 19:35:20
Teacher's summary:三联联动, 其实有许多第三方插件的, 但是了解其原理 , 还是有必要的