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

github上克隆开源的三级地址选择器，修改为四级地址选择器。效果图：

页面引入四个文件

---

    juery.js  

    city-picker.data.js  (全国省市区数据)

    city-picker.js  (js实现功能逻辑)

    city-picker.css  (选择器样式，可优化样式)

html页面代码

---

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

缺点及优化建议

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

2.建议地址选择，进行异步处理，比如点击广东省，只返回广东的所有城市数据。

 

项目github地址和demo地址：

　　请关注公众号，然后点击“历史文章“搜索  “地址” 关键字，查看文章底部，谢谢！

 

转载于:https://www.cnblogs.com/huangchanghuan/p/6681510.html