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

国际惯例 上效果图：

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

数据库

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

数据表结构如下：

部分使用到的字段信息：

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方法。

         显示当前地址信息：finalCity，只要在js中使用setData设置该值，该值就会动态改变。

city：显示当前可选的地区

        使