15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 后端开发 Thinkphp5

layui城市三级联动

王少铮| 发布于 2021-09-28 09:46:53| 145阅读| 0点赞| 0评论
举报

以更简单的方式解决layui城市三级联动的问题

首先去下面这个链接下载layui的layarea扩展

https://fly.layui.com/extend/layarea/

下载下来后将压缩包里mods文件夹下的layarea.js文件移入到你的layui/lay/modules目录下

然后在layui.js文件里添加一句


然后就可以正常使用了


html部分

<div class="layui-form-item" id="area-picker">
                            <label class="layui-form-label">违法地点</label>
                            <div class="layui-input-inline" style="width: 16%; margin-left: 10px">
                                <select name="province" class="province-selector" data-value="" lay-filter="province-1">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 16%; margin-left: 0;">
                                <select name="city" class="city-selector" data-value="" lay-filter="city-1">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 15%; margin-left: 0;">
                                <select name="county" class="county-selector" data-value="" lay-filter="county-1">
                                    <option value="">请选择区</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 41%; margin: 0;">
                                <input type="text" class="layui-input" name="detailedAddress" id="detailedAddress" placeholder="请输入详细地址" autocomplete="off"/>
                            </div>
                        </div>




js部分

layui.use(['layer', 'layarea'], function() {
    var layer = layui.layer,
         layarea = layui.layarea;

    layarea.render({
            elem: '#area-picker',
            data: {
                province: '河北省',
                city: '石家庄市',
                county: '桥西区',
            },
            change: function (res) {
                //选择结果
                console.log(res);
            }
     });
})
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王少铮
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部