欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Layui下拉3级联动

程序员文章站 2022-06-10 22:32:12
这里我就不给大家详细说明了直接附图: js代码: layui.use(['layer', 'form','xform','layer'], function () { var element = layui.element; var form = layui.form; var layer = la ......

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

  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();
});