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

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="50%;"></div> 

缺点及优化建议

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

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

项目github地址和demo地址:

  请关注公众号,进入公众号,然后搜索  “地址” 关键字,查看文章底部,谢谢!

原文地址:https://www.cnblogs.com/huangchanghuan/p/6681510.html