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

最新推荐文章于 2025-06-22 21:21:52 发布

原创

最新推荐文章于 2025-06-22 21:21:52 发布 · 1.1w 阅读

9 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中实现省市区三级联动选择功能。通过数据库提供数据，后台接口根据父级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方法。