微信小程序 省市区三级地址选择实现

本文介绍了如何在微信小程序中实现省市区三级联动选择功能。通过数据库提供数据,后台接口根据父级ID查询地区信息,前端使用CSS和JS动态更新选择状态,实现选择时自动刷新下级区域,点击取消返回上一级,点击确定保存地址。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

国际惯例 上效果图:

省市区三级联动,选择省自动刷新市,选择市自动刷新区,点击取消自动返回上一级重新选择,点击确定,保存地址。

数据库

这份数据库是某天在网上逛到的,当时未记录出处,直接贴出给读者使用,实在不妥,此处仅贴出表结构,方便大家交流学习。如有读者了解此份数据出处,烦请留言,谢谢!

数据表结构如下:

部分使用到的字段信息:

id:唯一标识每一个数据

name:地区名

parent_id:上级地区的id,若parent_id = 0 ,表示无上级信息,当前即为最高行政区。

extra:主要标识少数民族自治州或者自治县的信息,如:巴音郭楞 蒙古 自治州,此处存储 蒙古 

例:

suffix:行政级别 市 省 县 区等

 

部分地区数据信息如下:

后台

后台仅需提供一个接口,根据parent_id,查询地区信息

此处使用的后台是SSM框架,贴出主要接口、sql

1.与小程序交互接口

@RequestMapping(value = "/getArea", method = RequestMethod.POST)
	private @ResponseBody
	List<District> getArea(HttpServletRequest request) {
		int parentId = Integer.parseInt(request.getParameter("parentId"));
		logger.info("getArea");
		List<District> list = new ArrayList<District>();
		try {
			list = districtService.getAreas(parentId);
		} catch (Exception e) {

		}
		return list;
	}

2.查询sql

	<select id="getAreas" resultType="District">
		<!-- 具体的sql -->
		SELECT
			id,concat(name,extra,suffix) as name,parent_id as parentId
		FROM
			district
		WHERE
			parent_id = #{parentId}
	</select>

前端

先贴出css:

.hotCity {
  padding-right: 50rpx;
  margin: auto;
}

.weui-grid {
  padding: 10rpx 0;
  width: 160rpx;
  box-sizing: border-box;
  border: 1rpx solid #ececec;
  border-radius: 8rpx;
  background-color: white;
  margin: 8rpx 0;
}

.weui-grids {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.weui-grid__label {
  display: block;
  text-align: center;
  color: #333;
  font-size: 30rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.county {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  margin-left: 15px;
}
/** 头部css **/
.headTitle{
  display: flex;
}

.headButton{
	background: #f68135;
	border-radius: 25rpx;
	border: 1px solid #f68135;
	color: #fff;
	height: 80rpx;
	line-height: 80rpx;
	margin: 0 auto;
	width: 150rpx;
  font-size: 45rpx;
  text-align: center;
  padding:0px;
  vertical-align:middle ;
}

html

html仅由两部分组成:

头部:确定、取消按钮,显示当前选择地址信息

         确定取消主要绑定了两个方法:submitChoose 及 cancleChoose 两个方法,点击不同按钮,执行不同js方法。

         

评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值