中国 / 省市区县 / 四级联动 / 地址选择器(京东商城地址选择)

因为项目的需要,地址选择要实现省市区县四级选择,和京东商城地址选择功能一样;

我在github上面克隆了一个开源的三级地址选择器,把它修改为四级:

1.这个选择器是一次性加载全国省市区县数据到客户端,比较消耗流量(1M).

2.选择器显示人性化方面还可以继续优化.

3.个人推荐项目中省市区县地址选择,进行异步处理,比如点击广东省,只返回广东的所有城市数据.(我接触的两个项目,一个cp端项目是使用了这个选择器,另外一个app端项目使用异常查询加载)

四级选择器github地址:https://github.com/huangchanghuan/city-picker

四级选择器demo地址:https://huangchanghuan.github.io/city-picker/

===============我==是==分==隔==线=============================

有人发邮件询问我怎么使用,以下是回复的内容,再次补充在这里,希望对有需要的人有用:

你好,感觉比较意外收到这封邮件,如果以下对你有帮助,请给我github(https://github.com/huangchanghuan/city-picker)点个星星,顺便关注下哈.

这个小功能(真的很简单)是我之前做项目copy另外一位开源三级改成四级的(1到4级可配置),使用很简单如下图:
1.引入图中四个文件
juery.js (请把这个放首位引入)
city-picker.data.js (全国省市区数据都在这个文件里面)
city-picker.js (js实现功能逻辑)
city-picker.css (省市区县选择器样式,这个也可以不用,可以自己写个更好看的)
2.html页面代码:

<div style="position: relative;">
<input class="form-control" readonly type="text" data-toggle="city-picker" style="width:50%;">
</div>

3.完成.其实demo页面使用方法写得很清楚(https://huangchanghuan.github.io/city-picker/)
　　　如果你有时间,这个项目优化建议:优化显示,由图3.1改为图3.2(图3.2真正合理实现方法会在第四点中讲到,如果真使用这个工具实现,从性能和用户体验上面都很太友好.)
　　　　　　　　3.1


　　　　　　　　3.2



4.我感觉,这种方式实现地址选择在真正项目中使用时不合理的,一次性加载全国数据对客户端极度不友好,并且浪费用户的流量,以下做法比较合理:
省市区县选择应该做成异步请求,共四个接口:一个接口获取全国省,一个接口根据省id获取城市,一个接口根据城市id获取区域,一个接口根据区域id获取县;
最后,如果这些请求对服务器有压力,可以把数据都放在缓存之中;
　　

最后效果是这样子(https://huangchanghuan.github.io/city-picker/):