Layui下拉3级联动

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

  

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<json.data.length; i++){
CityListHTML+= "<option value=""+json.data[i].id+"">"+json.data[i].name+"</option>"
}
$("#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<json.data.length; i++){
regionListHTML+="<option value=""+json.data[i].id+"">"+json.data[i].name+"</option>"
}
$("#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<json.data.length; i++){
PoliceListHTML+="<option value=""+json.data[i].id+"">"+json.data[i].name+"</option>"
}
$("#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<json.data.length; i++){
CommunityHTML+="<option value=""+json.data[i].id+"">"+json.data[i].name+"</option>"
}
$("#Community").append(CommunityHTML);
form.render();
}
})
})
}
})
})
}
})

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