下載下傳位址:http://download.csdn.net/detail/cometwo/9436021
接着上一篇純js移動端日期選擇插件,話說今天同僚又來咨詢省市縣關聯的效果在移動端中如何實作,還是老樣子,百度上一搜,诶~又全是基于jquery、zepto的,更加可恨的是大多數都是pc版的,三個select标簽!!!這在移動端上的體驗太low了,我想以我的脾氣肯定是要自己做的,正好之前做了日期選擇,那就依葫蘆畫瓢自己再做一個吧,來來來,先上效果圖:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL1kDMzEDNwADMx0SO2AjNwATM0EzMwIDM2EDMy0CO4gTOzYzLcJDM2EDMy8CX4gDO5MjNvw1ZvxmYvwVbvNmLzd2bsJmbj5SNxAjMzV2Zh1Wavw1LcpDc0RHaiojIsJye.png)
在html頁面中引入input标簽,寫法如下:
将樣式檔案引入到頁面中:
同時引入js檔案到頁面中:
初始化插件:
lareadata是我自己組織的一個城市資料源數組,定義在js插件腳本中的底部,資料源的格式為:
結構我想大家一看就能明白,是以大家可以依照自己的需求靈活的自定義需要産生關聯的資料源。
這款純js的移動端城市選擇插件本身體積很小,去掉lareadata變量體積不到5kb,适用于在移動端中實作省市縣關聯效果,其實這個插件要比上一篇的日期選擇插件重要的多,因為日期插件移動端有原生的,而移動端中城市選擇插件沒有原生的,而且項目中的這類需求出現頻率是非常高的。
獨樂樂不如衆樂樂,如果夥伴們手上沒有移動端城市選擇插件不如先拿我這個應付一下吧!
項目位址:https://github.com/xfhxbb/larea
json: