github上克隆開(kāi)源的三級(jí)地址選擇器，修改為四級(jí)地址選擇器。效果圖：

頁(yè)面引入四個(gè)文件

---

????juery.js??

????city-picker.data.js ?(全國(guó)省市區(qū)數(shù)據(jù))

????city-picker.js ?(js實(shí)現(xiàn)功能邏輯)

????city-picker.css ?(選擇器樣式，可優(yōu)化樣式)

html頁(yè)面代碼

---

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

缺點(diǎn)及優(yōu)化建議

1.選擇器是一次性加載全國(guó)省市區(qū)縣數(shù)據(jù)到客戶(hù)端，比較消耗性能流量(1M)；

2.建議地址選擇，進(jìn)行異步處理，比如點(diǎn)擊廣東省，只返回廣東的所有城市數(shù)據(jù)。

?

項(xiàng)目github地址和demo地址：

　　請(qǐng)關(guān)注公眾號(hào)，然后點(diǎn)擊“歷史文章“搜索? “地址” 關(guān)鍵字，查看文章底部，謝謝！

?

轉(zhuǎn)載于:https://www.cnblogs.com/huangchanghuan/p/6681510.html

總結(jié)

以上是生活随笔為你收集整理的中国 / 省市区县 / 四级联动 / 地址选择器(京东商城地址选择)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。