城市三级联动功能实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333713

背景：

• 最近在进行商品购买流程的开发，需要用户填写自己的收货地址，为了保证地址的准确性，需要使用到全国城市的三级联动功能
• 其中可以有三个思路：

• 1.使用 js 直接加载城市信息；
• 2.自己建立数据库，然后使用 ajax 异步加载城市数据；
• 3.借用第三方城市接口，例如阿里接口，获取数据。

一.html 触发点击事件，直接获取js中的城市数据

• 首先，这个功能在实现上最简单，本人参考了度娘搜索的纯 js 实现网页，需要提醒的源代码适用的 jQuery 版本已经过低，建议可参考其网页下面的网友回复
• 我将代码做了处理整合到 ThinkPHP 框架中，下面介绍一下实现效果：

1.正确引用 area.js 文件

2.对应页面 mobilepayment

• 因为不同的框架对于模板公共文件的引用方法不同，可自行编辑

3.实现效果

4.数据处理

• 待三级城市信息显示完全可以使用ajax 异步提交到后台进行数据的插入即可。

二.创建数据库， ajax 异步加载城市数据

• 此方法需要获取到全国的城市数据，网上搜索下载一般会是word文档或者excel表的形式
• 记得mysql数据库可以直接将excel文件转储到数据表，之后就是进行数据的异步获取，此处提供之前所写的类似功能数据库三级分类，敬请指摘

三.第三方城市接口

• 网上看到一篇文章—中国城市三级联动数据获取方法现，值得推荐…