Layui下拉3级联动
2024-09-01 19:11:50
这里我就不给大家详细说明了直接附图:
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();
});
最新文章
- 在Outlook中查看预览SharePoint文档库的文档
- Delphi的分配及释放---New/Dispose, GetMem/FreeMem及其它函数的区别与相同
- 1220. Stacks
- FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/
- 深入理解计算机系统第二版习题解答CSAPP 2.2
- WPF 实现控件间拖拽内容
- JAVA Timer定时器使用方法(一)
- 201521123049 《JAVA程序设计》 第8周学习总结
- 渗透测试入门DVWA 教程1:环境搭建
- day 11 装饰器
- VUE 组件通信、传值
- 洗礼灵魂,修炼python(70)--爬虫篇—补充知识:json模块
- 5WHY分析法:一个问题分析与解决的工具
- 51nod1340 地铁环线
- Jquery中click事件重复执行的问题
- [工作日志] 2018-11-30 重要: 1. 多条件+ 分页 + 多表联查 2. idea拉新分支
- 《SDN软件定义网络从入门到精通》导论课
- tensorflow mnist 给一张手写字辨别
- img atl和a title
- Template(Updating)