純原生js移動端城市選擇插件

      接着上一篇純js移動端日期選擇插件，話說今天同事又來咨詢省市縣聯動的效果在移動端中如何實現，還是老樣子，百度上一搜，誒~又全是基於jquery、zepto的，更加可恨的是大多數都是PC版的，三個select標簽！！！這在移動端上的體驗太low了，我想以我的脾氣肯定是要自己做的，正好之前做了日期選擇，那就依葫蘆畫瓢自己再做一個吧，來來來，先上效果圖：

用法

在html頁面中引入input標簽，寫法如下：

<input id="demo1" type="text" readonly="" name="input_area" placeholder="城市選擇特效"/>

將樣式文件引入到頁面中：

<link rel="stylesheet" href="css/common/lArea.css">

同時引入js文件到頁面中：

<script src="lArea.js"></script>

初始化插件：

var area = new lArea();
area.init({
    'trigger': '#demo1',//控件ID
    'data':lAreaData//數組格式數據源，可擴展為自定義數據源
});

lAreaData是我自己組織的一個城市數據源數組，定義在js插件腳本中的底部，數據源的格式為：

    var lAreaData = [{
        "id": "2",
        "name": "一級",
        "child": [{
            "id": "21",
            "name": "二級1",
            "child": [{
                "id": "211",
                "name": "三級1"
            }, {
                "id": "212",
                "name": "三級2"
            }, {
                "id": "213",
                "name": "三級3"
            }]
        }, {
            "id": "22",
            "name": "二級2"
        }, {
            "id": "23",
            "name": "二級3"
        }]
    }];

結構我想大家一看就能明白，所以大家可以依照自己的需求靈活的自定義需要產生聯動的數據源。

這款純js的移動端城市選擇插件本身體積很小，去掉lAreaData變量體積不到5kb，適用於在移動端中實現省市縣聯動效果，其實這個插件要比上一篇的日期選擇插件重要的多，因為日期插件移動端有原生的，而移動端中城市選擇插件沒有原生的，而且項目中的這類需求出現頻率是非常高的。

獨樂樂不如眾樂樂，如果伙伴們手上沒有移動端城市選擇插件不如先拿我這個應付一下吧！

 

 

項目地址：https://github.com/xfhxbb/LArea