PHP前端开发

layui怎么实现三级联动

百变鹏仔 2个月前 (11-16) #layui
文章标签 layui
layui实现三级联动的方法:首先创建html的页面;然后创建【address.js】文件,内容为“address.prototype.provinces = function(){...}”;最后通过layui模块实现三级联动即可。

本教程操作环境:windows10系统、layui2.5.6版,Dell G3电脑。

基于layui的三级联动模块

html的页面代码如下:

	<meta><meta><meta><meta><meta><meta><meta><link><p>		</p><p>			<select><option>请选择省</option></select></p>		<p>			<select><option>请选择市</option></select></p>		<p>			<select><option>请选择县/区</option></select></p>	<script></script><script></script><script>	layui.config({		base : "../../../js/" //address.js的路径	}).use([ &#39;layer&#39;, &#39;jquery&#39;, "address" ], function() {		var layer = layui.layer, $ = layui.jquery, address = layui.address();	});</script>

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('<option>请选择县/区</option>');                var value = proData.value;                if (value &gt; 0) {                    that.citys(data[$(this).index() - 1].childs);                } else {                    $("select[name=city]").attr("disabled", "disabled");                }            });        })    }    //加载市数据    Address.prototype.citys = function(citys) {        var cityHtml = '<option>请选择市</option>',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 &gt; 0) {                that.areas(citys[$(this).index() - 1].childs);            } else {                $("select[name=area]").attr("disabled", "disabled");            }        });    }    //加载县/区数据    Address.prototype.areas = function(areas) {        var areaHtml = '<option>请选择县/区</option>';        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教程》