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

  

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

Layui下拉3级联动的更多相关文章

  1. layui下拉框数据过万渲染渲染问题解决方案

    方案一:layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化 如图下 ...

  2. C# MVC LayUI实现下拉框二级联动

    一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...

  3. django:下拉框二级联动实现

    注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...

  4. Layui下拉框改变时触发事件

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

  5. Excel下拉选项二级联动

    在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...

  6. 解决layui下拉选择框只能选择不能手动输入文字

    审查元素可以看到,layui的select下拉框是用input和div模拟出来的,所以,如下例子,我的解决方法是:$('.mySelect').find('input').removeAttr(&qu ...

  7. layUI 下拉框遮挡

    原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了! 在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入 &l ...

  8. ASP.NET——实现两个下拉框动态联动

    引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...

  9. Layui下拉选渲染

    下拉选渲染有很多方式,这个比较简单,记录一下: HTML代码如下: <div class="layui-input-inline"> <input type=&q ...

随机推荐

  1. 《Effective Java》 读书笔记(一) 使用静态构造方法代替传统构造函数

    对象的创建与销毁 ITEM1 使用静态工厂方法代替构造函数 传统的新建一个对象的方法是通过构造函数: Foo foo =new Foo(); 一个类也可以提供一个静态方法产生一个对象: Boolean ...

  2. 「2019.8.11 考试」一套把OI写的很诗意的题

    这次写的更惨了,T2暴力再次挂掉了. 先写了T1的75暴力,然后写了T2的70分暴力(挂成了25),T3啥也不会骗了12分.T3看完题一点思路没有,心态爆炸了,一直在观察数据,忽略的思考的重要性,以至 ...

  3. 常用git命令教程

    一.新建代码库 # 在当前目录新建一个Git代码库 $ git init # 新建一个目录,将其初始化为Git代码库 $ git init [project-name] # 下载一个项目和它的整个代码 ...

  4. Spring-Mybatis-SpringMVC三大框架整合

    我们直接切人正题,不多逼逼赖赖 第一步:依赖,一下的这些基本上是SSM整合的全部依赖 <!-- https://mvnrepository.com/artifact/org.springfram ...

  5. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  6. [SD卡] FPGA笔记之SD卡

    1.数据怎么存进去的? 其中的sd_miso就是接收的1位数据,n个时钟下就收到n个数据,比如n=21. 2.如何做到先发送高位?

  7. Python 命令行之旅:深入 click 之子命令篇

    作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  8. ViewPage+Fragment的使用用法

    一.概述 从前面几篇文章,我们知道,实现ViewPager是要有适配器的,我们前面用的适配器是PagerAdapter,而对于fragment,它所使用的适配器是:FragmentPagerAdapt ...

  9. Java流程控制之(三)嵌套

    目录 嵌套循环 for循环嵌套 while循环嵌套 总结 之前谈到各种循环结构,有for循环啊,有while循环啊,可以完成不断重复的动作,相当方便.那么如果好多个循环结合再一次,又是如何实现效果的呢 ...

  10. 小白学 Python 爬虫(7):HTTP 基础

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...