layui省市区三级联动

layui省市区三级联动


html:

            <!--省市区联动三级联动-->
            <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_name" value="{{ $info->province_name ?? '' }}" class="province-selector" data-value="{{ $info->province_name ?? '' }}" lay-filter="province-1">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="city_name" value="{{ $info->city_name ?? '' }}" class="city-selector" data-value="{{ $info->city_name ?? '' }}" lay-filter="city-1">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="area_name" value="{{ $info->area_name ?? '' }}" class="county-selector" data-value="{{ $info->area_name ?? '' }}" lay-filter="county-1">
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div>

js:

<script>
    //载入地区插件
    layui.config(
        {
            base: '../content/lay/modules/'
            ,version: '1.0'
        });

    $(function () {
        layui.use(['laypage', 'layer', 'tree', 'form','layarea'], function () {
            var laypage = layui.laypage
                , layer = layui.layer
                , tree = layui.tree
                , form = layui.form
            var laydate = layui.laydate;//日期时间模块
            var laypage = layui.laypage;//分页模块
            var laytpl = layui.laytpl;
            var layarea = layui.layarea;

            //省市区三级联动
            layarea.render({
                elem:'#area-picker',
                change:function (res) {
                    //选择结果
                    console.log(res)
                }
            })
   </script>

参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值