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

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

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

## 使用方法以及一些約定
1. html部分
整個(gè)選擇器需要使用一個(gè)父標簽包裹，如下使用了id="area-picker"，并且分別給省、市、區的select加上province-selector、city-selector、county-selector，用來(lái)區分對應的內容標簽，這里也可以自定義lay-filter，當一個(gè)頁(yè)面有多個(gè)省市區選擇器的時(shí)候，需要每組lay-filter命名不一樣，因此，最好的方式是，不手動(dòng)設置lay-filter。每個(gè)select可以指定初始值，在select上寫(xiě)data-value=""即可。初始值也可以通過(guò)js設置。
```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="">請選擇省</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="">請選擇市</option>
              </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
              <select name="county" class="county-selector" data-value="龍崗區" lay-filter="county-1">
                <option value="">請選擇區</option>
              </select>
            </div>
          </div>

```
2.js部分
引入layarea, 根據指定選擇器渲染標簽
```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: '龍崗區',
        // },
        change: function (res) {
            //選擇結果
            console.log(res);
        }
    });
});

```
3.完整示例
請直接查看index.html源碼。

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