• 技术文章 >web前端 >Layui教程

    layui怎么实现三级联动

    藏色散人藏色散人2020-11-30 17:08:09原创59

    layui实现三级联动的方法:首先创建html的页面;然后创建【address.js】文件,内容为“Address.prototype.provinces = function(){...}”;最后通过layui模块实现三级联动即可。

    推荐:《layUI教程

    本教程操作环境:windows10系统、layui2.5.6版,该方法适用于所有品牌电脑。

    基于layui的三级联动模块

    1.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>

    2.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();
        });
    });

    3.address.json的下载地址如下:

    一、下载地址https://pan.baidu.com/s/1bprUQSZ

    二、下载地址https://download.csdn.net/download/sundy_fly/10149270


    以上就是layui怎么实现三级联动的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:layui
    上一篇:layui如何获取复选框的值以及如何为复选框赋值 下一篇:layui输入框如何设置禁止输入
    第14期线上培训班

    相关文章推荐

    • layui怎么调整弹框大小• layui怎么固定表格的表头• layui怎么实现数据绑定• layui表格分页不生效怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网