在很多網(wǎng)站建設(shè)項(xiàng)目中，都需要填寫用戶的所屬地區(qū)的數(shù)據(jù)，比如最近我們團(tuán)隊(duì)在開發(fā)一個(gè)商城項(xiàng)目就需要做收貨地址的功能。而在移動(dòng)端上，IOS原生的那個(gè)選擇框看起來非常不錯(cuò)，大家可以看微信的收獲地址功能，體驗(yàn)還不錯(cuò)。當(dāng)然如果項(xiàng)目是在微信端，我們可以利用微信的jssdk拉取用戶在微信中保存的收貨信息。

好了話不多少，今天就跟大家介紹一款非常好用的不依賴其他任何js庫的移動(dòng)端城市選擇插件——LArea.js。這個(gè)插件使用起來非常簡單，也可以根據(jù)自己實(shí)際需要進(jìn)行個(gè)性化改造。該項(xiàng)目在github上有幾百顆星，還算不錯(cuò)的一個(gè)項(xiàng)目。

項(xiàng)目地址：https://github.com/xfhxbb/LArea

這是一個(gè)純原生js的移動(dòng)端城市選擇插件，不依賴任何庫 ##用法 在html頁面中引入input標(biāo)簽，寫法如下：

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

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

 <link rel="stylesheet" href="css/LArea.css">

同時(shí)引入js文件到頁面中：

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

初始化插件：

var area = new LArea();
area.init({
    'trigger': '#demo1',//觸發(fā)選擇控件的文本框，同時(shí)選擇完畢后name屬性輸出到該位置
    'valueTo':'#value1',//選擇完畢后id屬性輸出到該位置
    'keys':{id:'id',name:'name'},//綁定數(shù)據(jù)源相關(guān)字段 id對應(yīng)valueTo的value屬性輸出 name對應(yīng)trigger的value屬性輸出
    'type':1,//數(shù)據(jù)源類型
    'data':LAreaData//數(shù)據(jù)源
});

自定義數(shù)據(jù)源結(jié)構(gòu)參考：

//初始化type=1時(shí)，參考下列數(shù)據(jù)源
var LAreaData1 = [{
         "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"
         }]
     }];
     
//初始化type=2時(shí)，參考下列數(shù)據(jù)源
var provs_data = [{
    "text": "省",
    "value": "1"
}, {
    "text": "省",
    "value": "2"
}];
var citys_data = {
    "1": [{
        "text": "市",
        "value": "11"
    }, {
        "text": "市",
        "value": "12"
    }],
    "2": [{
        "text": "市",
        "value": "21"
    }, {
        "text": "市",
        "value": "22"
    }]
};
var dists_data = {
    "11": [{
        "text": "區(qū)",
        "value": "111"
    }, {
        "text": "區(qū)",
        "value": "112"
    }],
    "21": [{
        "text": "區(qū)",
        "value": "211"
    }, {
        "text": "區(qū)",
        "value": "212"
    }]
};

關(guān)于數(shù)據(jù)源也可以直接利用這個(gè)插件包中已經(jīng)有的兩個(gè)數(shù)據(jù)包，分別是LAreaData1.js和LAreaData2.js，使用自己的數(shù)據(jù)源也可以參考這兩種風(fēng)格來進(jìn)行。