城市三级联动功能实现

背景：

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

其中可以有三个思路：

1.使用 js 直接加载城市信息；

2.自己建立数据库，然后使用 ajax 异步加载城市数据；

3.借用第三方城市接口，例如阿里接口，获取数据。

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

首先，这个功能在实现上最简单，本人参考了度娘搜索的纯 js 实现网页，需要提醒的源代码适用的 jQuery 版本已经过低，建议可参考其网页下面的网友回复

我将代码做了处理整合到 ThinkPHP 框架中，下面介绍一下实现效果：

1.正确引用 area.js 文件

2.对应页面 mobilepayment

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

3.实现效果

4.数据处理

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

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

此方法需要获取到全国的城市数据，网上搜索下载一般会是word文档或者excel表的形式

记得mysql数据库可以直接将excel文件转储到数据表，之后就是进行数据的异步获取，此处提供之前所写的类似功能数据库三级分类，敬请指摘

三.第三方城市接口

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