layui实现三级联动的方法：首先创建html的页面；然后创建【address.js】文件，内容为“Address.prototype.provinces = function(){...}”；最后通过layui模块实现三级联动即可。
本教程操作环境：windows10系统、layui2.5.6版，Dell G3电脑。
基于layui的三级联动模块
html的页面代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../../layui-v2.1.5/css/layui.css" />
</head>
<body>
<p class="layui-form">
<p class="layui-input-inline">
<select name="province" lay-filter="province" class="province">
<option value="">请选择省</option>
</select>
</p>
<p class="layui-input-inline">
<select name="city" lay-filter="city" disabled>
<option value="">请选择市</option>
</select>
</p>
<p class="layui-input-inline">
<select name="area" lay-filter="area" disabled>
<option value="">请选择县/区</option>
</select>
</p>
</p>
</body>
<script type="text/javascript" src="../../../layui-v2.1.5/layui.js"></script>
<script type="text/javascript" src="address.js"></script>
<script type="text/javascript">
layui.config({
base : "../../../js/" //address.js的路径
}).use([ 'layer', 'jquery', "address" ], function() {
var layer = layui.layer, $ = layui.jquery, address = layui.address();
});
</script>
<html>address.js的代码入下：
ps:需要注意的有： $.get("address.json", function (data) {} 的地址为json地址，地址不对会报异常。
layui.define(["form","jquery"],function(exports){
var form = layui.form,
$ = layui.jquery,
Address = function(){};
Address.prototype.provinces = function() {
//加载省数据
var proHtml = '',that = this;
$.get("address.json", function (data) {
for (var i = 0; i < data.length; i++) {
proHtml += '<option value="' + data[i].code + '">' + data[i].name + '</option>';
}
//初始化省数据
$("select[name=province]").append(proHtml);
form.render();
form.on('select(province)', function (proData) {
$("select[name=area]").html('<option value="">请选择县/区</option>');
var value = proData.value;
if (value > 0) {
that.citys(data[$(this).index() - 1].childs);
} else {
$("select[name=city]").attr("disabled", "disabled");
}
});
})
}
//加载市数据
Address.prototype.citys = function(citys) {
var cityHtml = '<option value="">请选择市</option>',that = this;
for (var i = 0; i < citys.length; i++) {
cityHtml += '<option value="' + citys[i].code + '">' + citys[i].name + '</option>';
}
$("select[name=city]").html(cityHtml).removeAttr("disabled");
form.render();
form.on('select(city)', function (cityData) {
var value = cityData.value;
if (value > 0) {
that.areas(citys[$(this).index() - 1].childs);
} else {
$("select[name=area]").attr("disabled", "disabled");
}
});
}
//加载县/区数据
Address.prototype.areas = function(areas) {
var areaHtml = '<option value="">请选择县/区</option>';
for (var i = 0; i < areas.length; i++) {
areaHtml += '<option value="' + areas[i].code + '">' + areas[i].name + '</option>';
}
$("select[name=area]").html(areaHtml).removeAttr("disabled");
form.render();
}
var address = new Address();
exports("address",function(){
address.provinces();
});
});address.json的下载地址如下：
一、下载地址https://pan.baidu.com/s/1bprUQSZ
二、下载地址https://download.csdn.net/download/sundy_fly/10149270
推荐：《layUI教程》
以上是layui怎么实现三级联动的详细内容。更多信息请关注PHP中文网其他相关文章！
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
如何使用Layui的元素模块来创建选项卡，手风琴和进度条？Mar 18, 2025 pm 01:00 PM本文详细介绍了如何使用Layui的元素模块来创建和自定义UI元素，例如选项卡，手风琴和进度条，突出显示HTML结构，初始化和常见的陷阱，以避免。
如何自定义Layui旋转木制模块的外观和行为？Mar 18, 2025 pm 12:59 PM本文讨论了自定义Layui的Carousel模块，重点介绍了外观和行为的CSS和JavaScript修改，包括过渡效果，自动播放设置以及添加自定义导航控件。
如何使用Layui的旋转木载模块来创建图像滑块？Mar 18, 2025 pm 12:58 PM该文章指导使用Layui的Carousel模块用于图像滑块，详细介绍设置的步骤，自定义选项，实现自动播放和导航以及性能优化策略。
如何将Layui的上传模块配置为限制文件类型和尺寸？Mar 18, 2025 pm 12:57 PM本文讨论了使用Accept，Exts和Size属性来限制Layui的上传模块，以限制文件类型和尺寸，并自定义错误消息以违反。
如何使用Layui的图层模块来创建模态窗口和对话框？Mar 18, 2025 pm 12:46 PM本文介绍了如何使用Layui的图层模块创建模态窗口和对话框，详细设置，类型，自定义和常见的陷阱要避免。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌
热工具
SublimeText3汉化版
中文版，非常好用
Atom编辑器mac版下载
最流行的的开源编辑器
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
禅工作室 13.0.1
功能强大的PHP集成开发环境
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
