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怎么实现三级联动的详细内容。