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
    评论
Vue省市三级联动选择器是一个基于Vue框架开发的组件,主要用于在前端页面实现省市县三级地区选择功能。 在实现这个功能的时候,可以通过调用第三方库或者自己编写代码来实现。首先,需要有一个地区的数据源,可以是从后端接口获取到的数据,也可以是直接存储在前端的静态数据。 在使用Vue框架时,可以通过使用computed属性来动态生成省份的数据,再根据选中的省份来生成对应的城市数据,最后根据选中的城市来生成对应的县区数据。这样就实现了省市三级联动选择的效果。 在Vue模板中,可以通过v-for指令来遍历省市县数据,然后通过v-model指令绑定选中的省市县数据,实现数据的双向绑定。同时,可以通过使用v-on指令来监听省市选择时的事件,以便在选择变化时更新城市和县区的数据。 除了使用Vue框架的核心功能外,还可以使用第三方组件库或UI框架来美化选择器的样式,增加用户体验。 综上所述,Vue省市三级联动选择器是一个基于Vue框架开发的组件,可以实现在前端页面上方便地选择地区的功能。通过动态生成省市县数据,并根据选中的选择生成对应的下级数据,实现了省市三级联动。通过Vue框架的特性和指令,实现数据的双向绑定和事件监听,提升了交互效果。同时,可以使用第三方组件库或UI框架美化选择器的样式,增加用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值