基於layui的select change事件ajax響應（主要用於省市區級聯響應，其他的只要修改一下也可適應）

　　原因：由於從網上查找相關基於select的級聯查詢省市區稍有些混亂復雜，而我當前產品中需要用到，也是一種常用的案例，特在此優化相關代碼，覺得還不錯的請動動您的小拇哥點個贊。

一、廢話少說，先上效果圖。

1.1 初始化

1.2 選擇后級聯初始化

 

二、相關html代碼

<div
    class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
    <div class="layui-form-item">
        <label class="layui-form-label">地址：</label>
        <div class="layui-input-inline">
            <select id="province" name="province"
                model="select" lay-filter="province">
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="city" name="city" model="select"
                lay-filter="city">
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="district" name="district"
                model="select">
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="text" id="street" name="street" placeholder="街道"
                autocomplete="off" class="layui-input" width="50px" />
        </div>
    </div>
</div>

三、相關js代碼

　　1. 86是中國的區域代碼。首先初始化省份。

　　2. 對上面的html代碼中省份和市選擇進行select綁定，lay-filter過濾器在此產生作用。

　　3. 選擇省份，查詢市和區；選擇市，查詢區。每次查完之后必須初始化表單，否則不產生響應效果。

var layData = [ 'form' ];
layui.use(layData, function() {
    var form = layui.form;
    form.on('select(province)', function(data){
        initChildAreas(data.value, 'city');
        form.render();
    });
    form.on('select(city)', function(data){
        initChildAreas(data.value, 'distinct');
        form.render();
    });
});

$(function() {
    initChildAreas('86', 'province');
});

function initChildAreas(zipCode, type) {
    var data = getChildAreasByPZipCode(zipCode, type);
    initOptionHtml(data);
}

// 返回子區域集合
function getChildAreasByPZipCode(pZipCode, searchType) {
    if (null == pZipCode) {
        return;
    }
    var returnData = new Object();
    var url = mbUser + 'area/getChildAreasByPZipCode/' + pZipCode;
    $.ajax({
        type : "GET",
        url : url,
        async : false,
        data : {
            SID : sid
        },
        success : function(msg) {
            if (msg.code != 0) {
                showAlert("錯誤：獲取下級區域節點失敗");
            }
            var areas = msg.props.areas;
            if (searchType == "province") {
                returnData.provincesData = areas;
                var data = getChildAreasByPZipCode(areas[0].zipCode, 'city');
                returnData.citysData = data.citysData;
                returnData.distinctsData = data.distinctsData;
            } else if (searchType == "city") {
                returnData.citysData = areas;
                var data = getChildAreasByPZipCode(areas[0].zipCode, 'distinct');
                returnData.distinctsData = data.distinctsData;
            } else if (searchType == "distinct") {
                returnData.distinctsData = areas;
            }
        },
        error : function() {
            showAlert("錯誤：獲取下級區域節點錯誤");
        }
    });
    
    return returnData;
}

function initOptionHtml(data) {
    var provincesHtml = '';
    var citysHtml = '';
    var distinctsHtml = '';
    var provincesData = data.provincesData;
    var citysData = data.citysData;
    var distinctsData = data.distinctsData;
    if (null != provincesData) {
        $.each(provincesData, function(index, province) {
            if (index == 0) {
                provincesHtml += '<option value="' + province.zipCode
                        + '" selected="selected">' + province.name + '</option>';
            } else {
                provincesHtml += '<option value="' + province.zipCode + '">' + province.name
                        + '</option>';
            }
        });
        $("#province").html(provincesHtml);
    }
    if (null != citysData) {
        $.each(citysData, function(index, city) {
            if (index == 0) {
                citysHtml += '<option value="' + city.zipCode
                        + '" selected="selected">' + city.name + '</option>';
            } else {
                citysHtml += '<option value="' + city.zipCode + '">' + city.name
                        + '</option>';
            }
        });
        $("#city").html(citysHtml);
    }
    if (null != distinctsData) {
        $.each(distinctsData, function(index, distinct) {
            if (index == 0) {
                distinctsHtml += '<option value="' + distinct.zipCode
                        + '" selected="selected">' + distinct.name + '</option>';
            } else {
                distinctsHtml += '<option value="' + distinct.zipCode + '">' + distinct.name
                        + '</option>';
            }
        });
        $("#district").html(distinctsHtml);
    }
}

四、ajax返回的數據

Area區域表各屬性定義

    /**
     * 名稱
     */
    @TableField("NAME")private String name;

    /**
     * 簡稱
     */
    @TableField("SHORT_NAME")private String shortName;

    /**
     * 羅馬字母拼寫
     */
    @TableField("FULL_NAME")private String fullname;

    /**
     * 郵政編碼
     */
    @TableField("ZIP_CODE")private String zipCode;

    /**
     * 英文字母表
     */
    @TableField("ENAME")private String ename;

    /**
     * 區域類型
     */
    @TableField("A_TYPE")private int aType;

    /**
     * 描述
     */
    @TableField("DESCRIPTION")private String description;

    // 父節點郵編
    @TableField(exist = false)
    private transient String pZipCode;

AreaType區域類型定義

/**
 * 區域類型
 */
public enum AreaType {
    /**
     * 國家
     */
    COUNTRY,
    /**
     * 省份
     */
    PROVINCE,
    /**
     * 城市
     */
    CITY,
    /**
     * 區/縣
     */
    DISTRICT,
    /**
     * 鎮
     */
    TOWN,
    /**
     * 鄉/村
     */
    VILLAGE
}

五、補充

　　只要數據庫中區域時樹形結構，那么通過上面的js代碼是可以級聯查詢的。

　　注意:

　　　　1.需要注意的是html代碼中lay-filter="anyFilter"必須要有值，form.on('select(anyFilter)', function(){...});才會產生作用

　　　　2.每次級聯查詢數據后，需要初始化表單form.render()之后，才會產生效果。