layui城市三級聯動(fesiong / layarea)

安裝

GitHub下載地址：https://github.com/fesiong/layarea.git

使用（html+js）

1. html部分

整個選擇器須要使用一個父標籤包裹，以下使用了id="area-picker"，而且分別給省、市、區的select加上province-selector、city-selector、county-selector，用來區分對應的內容標籤，這裏也能夠自定義lay-filter，當一個頁面有多個省市區選擇器的時候，須要每組lay-filter命名不同，所以，最好的方式是，不手動設置lay-filter。每一個select能夠指定初始值，在select上寫data-value=""便可。初始值也能夠經過js設置。

<div class="layui-form-item" id="area-picker">
    <div class="layui-form-label">網點地址</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>

２. js部分

引入layarea, 根據指定選擇器渲染標籤

//配置插件目錄
layui.config({
    base: './mods/'
    , version: '1.0'
});
//通常直接寫在一個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);
        }
    });
});