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 ...
随机推荐
- Linux系统 multitail 同时跟踪查看多个日志文件
一.问题描述: 平时我们在排查问题的时候往往需要查看日志文件来定位问题,有些程序可能关联的多个程序,因此需要打开多个窗口使用 tailf 或者tail -f 方式查看日志 但是需要不停的切换窗口来看不 ...
- 优化 Git Commit Message
目前很多项目都是通过 Git 进行管理的,Git 每次提交代码的过程中 提交说明 commit message 是必须的.但仅仅必须是不够的,好的提交说明可以帮助我们提高项目的整体质量. 作用与优点 ...
- RESTful基本概念
文章目录 01 前言 02 RESTful的来源 03 RESTful6大原则 1. C-S架构 2. 无状态 3.统一的接口 4.一致的数据格式 4.系统分层 5.可缓存 6.按需编码.可定制代码( ...
- Git学习笔记----基础运用
安装Git Windows: 进入官网下载或百度网盘下载 Git(V2.23_x64) 提取码:uf2x Ubuntu: sudo apt-get -install git 安装完成之后打开git命令 ...
- 最小生成树两个经典算法(Prime算法、Kruskal算法) - biaobiao88
经典的最小生成树例子,Prime算法,具体的步骤及其注释本人均在代码中附加,请仔细阅读与品味,要求,可以熟练的打出. //Prime算法基础 #include<iostream> usin ...
- 使用VM虚拟机安装Linux系统详细流程
最近新换了个电脑,所以需要重新安装虚拟机和Linux系统,话不多说,看流程吧 1.安装vm,这个就不说了,打开VM 2.点击安装虚拟机 3.选择自定义安装 4.选择稍后安装 5.选择要安装的系统 6. ...
- 「2019.7.22 考试」AC和WA0一步之遥
这卷子还是答的挺惨的. 第一题5min写完了,自认为AC(其实WA了80),第二题推了半天CRT的公式老出错结果发现是程序打错了.第三题打模拟150行结果数组没开够,开大就是0->60的转变.状 ...
- 【倒腾HTTPS】Nginx for Docker自签名SSL证书
前言 合格的web程序员, 必须能自由在 IIS. Nginx. Nginx for Docker上配置Https服务, 博客最近将专题记录 Https & Hsts 如何申请适用于生产 ...
- request爬虫通用的小技巧
嵩天老师一直强调的通用代码框架,这个框架可以用在很多爬虫中用来获取HTML文本,并且它通过response.raise_for_status()方法判断返回的状态码是不是200,如果不是,就会引发HT ...
- 小白学 Python(22):time 和 calendar 模块简单使用
人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...