轉載：https://github.com/fesiong/layarea

基於layui實現的省市縣區三級聯動下拉選擇器

關於layui

這裡不做介紹，直戳我閱讀

關於本省市區級聯下拉選擇器

本選擇器已經將它封裝成一個layui的外掛，使用起來非常方便，支援一個頁面中使用多個省市區選擇器，並且支援選擇結果回撥，支援自定義lay-filter。

使用方法以及一些約定

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>
 

2.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);
        }
    });
});
 

3.完整示例
請直接檢視index.html原始碼。

相關問題

程式碼能用