# 基于layui實(shí)現(xiàn)的省市縣區(qū)三級(jí)聯(lián)動(dòng)下拉選擇器

## 關(guān)于layui
這里不做介紹，[直戳我閱讀](http://layui.com)

## 關(guān)于本省市區(qū)級(jí)聯(lián)下拉選擇器
本選擇器已經(jīng)將它封裝成一個(gè)layui的插件，使用起來(lái)非常方便，支持一個(gè)頁(yè)面中使用多個(gè)省市區(qū)選擇器，并且支持選擇結(jié)果回調(diào)，支持自定義lay-filter。

## 使用方法以及一些約定
1. html部分
整個(gè)選擇器需要使用一個(gè)父標(biāo)簽包裹，如下使用了id="area-picker"，并且分別給省、市、區(qū)的select加上province-selector、city-selector、county-selector，用來(lái)區(qū)分對(duì)應(yīng)的內(nèi)容標(biāo)簽，這里也可以自定義lay-filter，當(dāng)一個(gè)頁(yè)面有多個(gè)省市區(qū)選擇器的時(shí)候，需要每組lay-filter命名不一樣，因此，最好的方式是，不手動(dòng)設(shè)置lay-filter。每個(gè)select可以指定初始值，在select上寫(xiě)data-value=""即可。初始值也可以通過(guò)js設(shè)置。
```html

<div class="layui-form-item" id="area-picker">
            <div class="layui-form-label">網(wǎng)點(diǎn)地址</div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="province" class="province-selector" data-value="廣東省" lay-filter="province-1">
                <option value="">請(qǐng)選擇省</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                <option value="">請(qǐng)選擇市</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="county" class="county-selector" data-value="龍崗區(qū)" lay-filter="county-1">
                <option value="">請(qǐng)選擇區(qū)</option>
              </select>
            </div>
          </div>

```
2.js部分
引入layarea, 根據(jù)指定選擇器渲染標(biāo)簽
```js

//配置插件目錄
layui.config({
    base: './mods/'
    , version: '1.0'
});

//一般直接寫(xiě)在一個(gè)js文件中

layui.use(['layer', 'form', 'layarea'], function () {
    var layer = layui.layer
        , form = layui.form
        , layarea = layui.layarea;

    layarea.render({
        elem: '#area-picker',
        // data: {
        //     province: '廣東省',
        //     city: '深圳市',
        //     county: '龍崗區(qū)',
        // },
        change: function (res) {
            //選擇結(jié)果
            console.log(res);
        }
    });
});

```
3.完整示例
請(qǐng)直接查看index.html源碼。

## 相關(guān)問(wèn)題
代碼能用