springboot+layui插件实现省市区三联

springboot+layui插件实现省市区三联

前言

之前做springboot+redis字典表数据获取，前端使用layui框架的时候做了个小案例，就是省市联的获取。

在这一过程中发现其实可以完全不用到后台去访问值，就可以直接在前端把这个事情做完。

mods

将数据嵌入到一个js文件中，直接从js文件中获取即可。

这里的轮子是别人造的，代码总共上千行，其实不复杂，主要是数据多，在这里就不贴代码了，将该js放在mods中即可。

前端代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layarea</title>
    <script src="js/layui/layui.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item" id="area-picker">
            <div class="layui-form-label">网点地址</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                    <option value="">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
    </div>

    <script>
        layui.config({
            base: './mods/'
            , version: '1.0'
        });
        layui.use(['layer', 'form', 'layarea'], function () {
            var layer = layui.layer
                , form = layui.form
                , layarea = layui.layarea;

            layarea.render({
                elem: '#area-picker',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
        });
    </script>
</body>
</html>

效果展示


写在后面

这个文章也只是我在研究springboot+redis+layui的过程中发现的一个小插件，简单实用。

posted @ 2021-07-19 10:12  局点6828  阅读(378)  评论(0)    收藏  举报