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地址:
请关注公众号,进入公众号,然后搜索 “地址” 关键字,查看文章底部,谢谢!