layui省市级下拉三级联动渲染与赋值

该实现方法从官网案例整合，亲测可用。官网入口https://fly.layui.com/extend/layarea/
layarea.js 以及layui.js请从官网下载

        <div class="layui-form-item" id="area-pickers">
            <label class="layui-form-label">选择地区</label>
            <div class="layui-input-block">
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="province" class="province-selector" data-value="" lay-filter="province-2">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="city" class="city-selector" data-value="" lay-filter="city-2">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="area" class="county-selector" data-value="" lay-filter="county-2">
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div>
        </div>

        layui.config({
            base: '/static/js/'//该路径为layarea.js的指向路径/static/js/layarea.js
            , version: '1.0'
        });
		 layui.use(['form', "table", "layer", "upload",'layarea'], function() {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var upload = layui.upload;
        var layarea = layui.layarea;
        layarea.render({//调用
            elem: '#area-pickers',//这个对应上面的id
            data: {//赋值data是我后端传过来的数据
                province: data.province,
                city: data.city,
                county: data.area,
            },
        });
      })
		

以上就是关于layui省市级下拉三级联动渲染与赋值。有任何疑问可以来私信我。
另外给大家推荐阿里云和腾讯的优惠活动，有需要的可以看下
阿里云服务器一折起
腾讯云海外服务器活动