layui 省市县区三级联动下拉选择器

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

去Git 地址 我只把 mods 里的 layarea.js 文件拿出来用了 

html 这块样式自己去在去修改 然后文件引入layui的css 跟js 就行了


						<div class="layui-form">
							<div class="layui-form-item" id="area-picker">
								<div class="layui-input-inline" style="width: 200px;">
									<select name="province" class="province-selector">
										<option value="">--选择省--</option>
									</select>
								</div>
								<div class="layui-input-inline" style="width: 200px;">
									<select name="city" class="city-selector">
										<option value="">--选择市--</option>
									</select>
								</div>
								<div class="layui-input-inline" style="width: 200px;">
									<select name="county" class="county-selector">
										<option value="">--选择区--</option>
									</select>
								</div>
								<div class="msg_input">
									<input type="text" placeholder="详细地址,如:街道,门牌号、楼栋号、单元室等">
								</div>
							</div>
						</div>

  layarea.js文件在这里配置一下就行

 //配置插件目录
        layui.config({
            base: '../../js/layui/mods/',//相对路径
            , version: '1.0'
        });

  layui.use(['layer','layarea','upload', 'laydate', 'form'], function () {
            var $ = layui.jquery
                , upload = layui.upload;
            var laydate = layui.laydate;
            var layer = layui.layer
                , form = layui.form
                , layarea = layui.layarea;


            //实际办公地址
            let obj1 = layarea.render({
                elem: '#area-picker',
                change: function (res) {
                    //选择结果
                    console.log(res);
                }
            });
})

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值