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();
});
Layui下拉3级联动的更多相关文章
- layui下拉框数据过万渲染渲染问题解决方案
方案一:layui下拉框分页插件 https://fly.layui.com/jie/29002/ 此插件我用了下浏览器缓存有问题,而且当下拉框数据量过万后,会一直渲染不出来,期待后期作者优化 如图下 ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- django:下拉框二级联动实现
注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...
- Layui下拉框改变时触发事件
layui.use(['form', 'layer'], function () { var form = layui.form(); var layer = layui.layer; form.on ...
- Excel下拉选项二级联动
在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...
- 解决layui下拉选择框只能选择不能手动输入文字
审查元素可以看到,layui的select下拉框是用input和div模拟出来的,所以,如下例子,我的解决方法是:$('.mySelect').find('input').removeAttr(&qu ...
- layUI 下拉框遮挡
原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了! 在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入 &l ...
- ASP.NET——实现两个下拉框动态联动
引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...
- Layui下拉选渲染
下拉选渲染有很多方式,这个比较简单,记录一下: HTML代码如下: <div class="layui-input-inline"> <input type=&q ...
随机推荐
- 《Effective Java》 读书笔记(一) 使用静态构造方法代替传统构造函数
对象的创建与销毁 ITEM1 使用静态工厂方法代替构造函数 传统的新建一个对象的方法是通过构造函数: Foo foo =new Foo(); 一个类也可以提供一个静态方法产生一个对象: Boolean ...
- 「2019.8.11 考试」一套把OI写的很诗意的题
这次写的更惨了,T2暴力再次挂掉了. 先写了T1的75暴力,然后写了T2的70分暴力(挂成了25),T3啥也不会骗了12分.T3看完题一点思路没有,心态爆炸了,一直在观察数据,忽略的思考的重要性,以至 ...
- 常用git命令教程
一.新建代码库 # 在当前目录新建一个Git代码库 $ git init # 新建一个目录,将其初始化为Git代码库 $ git init [project-name] # 下载一个项目和它的整个代码 ...
- Spring-Mybatis-SpringMVC三大框架整合
我们直接切人正题,不多逼逼赖赖 第一步:依赖,一下的这些基本上是SSM整合的全部依赖 <!-- https://mvnrepository.com/artifact/org.springfram ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- [SD卡] FPGA笔记之SD卡
1.数据怎么存进去的? 其中的sd_miso就是接收的1位数据,n个时钟下就收到n个数据,比如n=21. 2.如何做到先发送高位?
- Python 命令行之旅:深入 click 之子命令篇
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- ViewPage+Fragment的使用用法
一.概述 从前面几篇文章,我们知道,实现ViewPager是要有适配器的,我们前面用的适配器是PagerAdapter,而对于fragment,它所使用的适配器是:FragmentPagerAdapt ...
- Java流程控制之(三)嵌套
目录 嵌套循环 for循环嵌套 while循环嵌套 总结 之前谈到各种循环结构,有for循环啊,有while循环啊,可以完成不断重复的动作,相当方便.那么如果好多个循环结合再一次,又是如何实现效果的呢 ...
- 小白学 Python 爬虫(7):HTTP 基础
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...