layui实现三级联动的方法：首先创建html的页面；然后创建【address.js】文件，内容为“Address.prototype.provinces = function(){…}”；最后通过layui模块实现三级联动即可。
本教程操作环境：windows10系统、layui2.5.6版，Dell G3电脑。
基于layui的三级联动模块
html的页面代码如下：
请选择省
请选择市
请选择县/区
layui.config({base : "../../../js/" //address.js的路径}).use([ 'layer', 'jquery', "address" ], function() {var layer = layui.layer, $ = layui.jquery, address = layui.address();});
登录后复制
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[i].name + ''; } //初始化省数据 $("select[name=province]").append(proHtml); form.render(); form.on('select(province)', function (proData) { $("select[name=area]").html('请选择县/区'); 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 = '请选择市',that = this; for (var i = 0; i ' + citys[i].name + ''; } $("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 = '请选择县/区'; for (var i = 0; i ' + areas[i].name + ''; } $("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怎么实现三级联动的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3141454.html
