Layui下拉3级联动

这里我就不给大家详细说明了直接附图:

  Layui下拉3级联动_第1张图片

js代码:

layui.use(['layer', 'form','xform','layer'], function () {
var element = layui.element;
var form = layui.form;
var layer = layui.layer;

// 城市列表
$.ajax({
url:"/city/findById",
type:"GET",
async: false,
cache: false,
contentType: 'application/json',
dataType: "json",
success: function (json) {
console.log(json);
var CityListHTML='';
for (var i=0; i
CityListHTML+= ''
}
$('#CityList').append(CityListHTML);
form.render();

// 区域列表
form.on('select(CityList)', function(data){
var CityListid = data.value;
console.log(CityListid);
if (CityListid != "Nonull"){
document.getElementById('regionList').innerHTML='';
document.getElementById('PoliceList').innerHTML='';
document.getElementById('Community').innerHTML='';
$.ajax({
url:"/region/findById/"+CityListid,
type:"GET",
async: false,
cache: false,
contentType: 'application/json',
dataType: "json",
success: function (json) {
console.log(json);
document.getElementById('regionList').innerHTML='';
var regionListHTML='';
for (var i=0; i
regionListHTML+=''
}
$('#regionList').append(regionListHTML);
form.render();

// 派出所列表
form.on('select(regionList)', function(data){
var regionListid = data.value;
document.getElementById('PoliceList').innerHTML='';
document.getElementById('Community').innerHTML='';
$.ajax({
url:"/localPoliceStation/findById/"+regionListid,
type:"GET",
async: false,
cache: true,
contentType: 'application/json',
dataType: "json",
success:function (json) {
console.log(json);
document.getElementById('PoliceList').innerHTML='';
var PoliceListHTML='';
for (var i=0; i
PoliceListHTML+=''
}
$('#PoliceList').append(PoliceListHTML);
form.render();

// 社区列表
form.on('select(PoliceList)', function(data){
var PoliceListid = data.value;
$.ajax({
url:"/community/findById/"+PoliceListid,
type:"GET",
async: false,
cache: false,
contentType: 'application/json',
dataType: "json",
success:function (json) {
console.log(json);
document.getElementById('Community').innerHTML='';
var CommunityHTML='';
for (var i=0; i
CommunityHTML+=''
}
$('#Community').append(CommunityHTML);
form.render();
}
})
})
}
})
})
}
})

}
else {
document.getElementById('regionList').innerHTML='';
document.getElementById('PoliceList').innerHTML='';
document.getElementById('Community').innerHTML='';
form.render();
}
})
}
});
form.render();
});

你可能感兴趣的:(Layui下拉3级联动)