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


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地址:

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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM