layui省市区的实现,及编辑时如何返显

第一步:引入layui和jquery

 <link rel="stylesheet" href="./layui/css/layui.css">
 <script src="./layui/layui.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

第二步:HTML代码

 <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 id="province" 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 id="city" 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 id="county" name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div>
        </div>
    </div>

第三步:JS代码

<script>
 	//配置插件目录
   layui.config({
           base: './mods/',		//layui省市区三级联动, 需要引入配置文件,根据自己引入的地址更改
           version: '1.0'
    });

  //一般直接写在一个js文件中
   layui.use(['layer', 'form', 'layarea'], function () {
            var layer = layui.layer,
                form = layui.form,
                layarea = layui.layarea;

			//编辑时返显,将‘河南省’,'郑州市','金水区'换成从后台拿的地址就行
            $('#province').attr("data-value", '河南省');
            $('#city').attr("data-value", '郑州市');
            $('#county').attr("data-value", '金水区');
            
            layarea.render({
                elem: '#area-picker',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
             });
</script>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值