如題：最近做的一個小功能里需要用戶填寫地址，不可避免的要用到省市區三級聯動，區一下的地址自填了，馬上網上找了不少類似的插件，看了效果大致有以下幾類
分析了一波發現都不適合，為什么呢？
第1種排版格式明顯不適合移動端，需要的位置太大，也不符合手機使用習慣。
3和4就不說了，在手機上還用這種UI要被老板罵死。
2和5倒是看上去效果很不錯，不過IOS和安卓的差異太大，也放棄了，只能自己搞一個自定義樣式的三級聯動選擇插件了。先來一波效果圖
不要糾結樣子好不好看（按照設計要求來的），本身樣式就是可以自定義的
1，選擇器是彈出層，不影響原頁面任何布局
2，城市數據整理在js里，不依賴其他任何條件（用了個jq操作一波dom，不爽也可以去掉）
3，不依賴任何文件，不需要圖片，里面的icon都是字符
4，標題欄和城市容器分離，城市item樣式分離，可自行編輯樣式，選擇完了把結果顯示在你需要的地方即可。
主要函數：
1，初始化省份、初始化市級、初始化區級-initProv-initCity-initDist
2，選擇省、選擇市、選擇區-choiseProv-choiseCity-choiseDist
3，結束選擇-choiseEnd
4，重置-resetSelect
5，關閉-closeSelect
頁面結構：
<div class="select-city">
<div class="select-city-shade"></div>
<div class="select-city-container">
<div class="select-city-title">
<div class="selected-prov">選擇省</div>
<div class="selected-city">選擇市</div>
<div class="selected-dist">選擇區</div>
<div class="select-close">×</div>
</div>
<div class="select-item-container"></div>
</div>
</div>
Git地址：
https://github.com/heyach/select-city