Bootstrap 區域選擇器多級聯動

如下是js 代碼

if (!regionContainer.hasClass("select2-region-group")) {
        return false;
    }
    var $inputValue = regionContainer.children(regionContainer.attr("data-bind-input"));//設置或獲取選中的值
    var dataLevel = regionContainer.attr("data-bind-level");
    if (!dataLevel || dataLevel == "" || parseInt(dataLevel) <= 0)
    {
        dataLevel = 3;
    }
    var regionid = $inputValue.val();
    if (!regionid || regionid == " ") {
        regionid = 0;
    }
    var currItem2, currItem3, index = 0;// 二級 三級 項集合
    var data_Item1_value,
    data_Item2_value,
    data_Item3_value = { RegionId: regionid };//每一級的選擇值
    $.each(Global_Region_Data, function (ins1, item1) {//查找並獲取每一級的值
        var item1flag = false;
        if (item1.ChildEntities != null && item1.ChildEntities.length > 0) {
            $.each(item1.ChildEntities, function (ins2, item2) {
                var item2flag = false;
                if (item2.ChildEntities != null && item2.ChildEntities.length > 0) {
                    $.each(item2.ChildEntities, function (ins3, item3) {
                        if (data_Item3_value.RegionId == item3.RegionId) {
                            item2flag = true;
                            data_Item3_value = item3;
                            return false;
                        }
                    });

                }
                if (item2flag) {
                    data_Item2_value = item2;
                    item1flag = true;
                    return false;
                }
                else {
                    if (item2.RegionId == data_Item3_value.RegionId) {
                        data_Item2_value = item2;
                        item1flag = true;
                        return false;
                    }
                }
            });
        }
        if (item1flag) {
            data_Item1_value = item1;
            return false;
        }
        else {
            if (dataLevel == 1)
            {
                if (item1.RegionId == data_Item3_value.RegionId) {
                    data_Item1_value = item1;
                    item1flag = true;
                    return false;
                }
            }
        }
    });

    regionContainer.find("select").each(function () {
        var _self = $(this);
        index = index + 1;
        _self.attr("id", "select2-region-group-item-" + index);
        _self.attr("tab-index", index);
        
        _self.select2({
            delay: 250,
            // minimumInputLength: 1,
            ajax: {
                url: "/static/cloud/config/region/region.json",
                dataType: "json",
                type: "get",
                cache: true,
                data: function (params) {
                    return {
                        q: params.term
                    };
                },
                processResults: function (result, params) {
                    result = Global_Region_Data;
                    var filter = [{ id: " ", text: "不限" }];
                    if (parseInt(_self.attr("tab-index")) == 1)
                    {
                        if (dataLevel == 1)
                        {
                            filter=[{ id: "0", text: "不限" }];
                        }
                        
                    }
                    
                    if (parseInt(_self.attr("tab-index")) >= 2) {
                        var childentities = [];
                        if (parseInt(_self.attr("tab-index")) == 2) {
                            childentities = currItem2;
                        }
                        else {
                            childentities = currItem3;
                        }
                        if (childentities && childentities.length > 0) {
                            for (var i = 0; i < childentities.length; i++) {
                                if (!params.term || params.term == "" || (
                                params.term != "" && (childentities[i].RegionName.indexOf(params.term) >= 0
                                || childentities[i].RegionNameEn.indexOf(params.term) >= 0
                                || childentities[i].RegionShortNameEn.indexOf(params.term) >= 0))) {
                                    filter.push(childentities[i]);
                                }
                            }
                        }

                    }
                    else {
                        for (var i = 0; i < result.length; i++) {
                            if (result[i].ParentId > 0
                                && result[i].RegionLevel == parseInt(_self.attr("tab-index"))
                                && (!params.term || params.term == "" || (
                               params.term != "" && (result[i].RegionName.indexOf(params.term) >= 0
                                || result[i].RegionNameEn.indexOf(params.term) >= 0
                                || result[i].RegionShortNameEn.indexOf(params.term) >= 0)))) {

                                filter.push(result[i]);
                            }
                        }
                    }
                    return {
                        results: filter,

                    };
                }
            },
            placeholder: (index == 1 ? "===省份===" : (index == 2 ? "===輸入市===" : "===輸入縣===")),
            allowClear: true,    //選中以後，可手動點擊刪除
            escapeMarkup: function (markup) { return markup; }, // 字符轉義處理自定義格式化防止xss注入
          
            templateSelection: function (repo) {
                
                return repo.text;
            } // 函數用於呈現當前的選擇

        });
        _self.on("select2:select", function (e) {
            $inputValue.val("");
            var selectResult = e.params.data;
            if (_self.attr("tab-index") == "1") {
                regionContainer.find("#select2-region-group-item-2").val("");
                regionContainer.find("#select2-region-group-item-2").trigger("change");
                regionContainer.find("#select2-region-group-item-3").val("");
                regionContainer.find("#select2-region-group-item-3").trigger("change");
                regionContainer.find("#select2-region-group-item-2").hide();
                regionContainer.find("#select2-region-group-item-2").next().hide();
                regionContainer.find("#select2-region-group-item-3").hide();
                regionContainer.find("#select2-region-group-item-3").next().hide();
                currItem2 = null;
                if (selectResult && selectResult.id != " ") {
                    regionContainer.find("#select2-region-group-item-2").show();
                    regionContainer.find("#select2-region-group-item-2").next().show();
                    currItem2 = selectResult.ChildEntities;
                    
                }
                if (dataLevel == 1)
                {
                    $inputValue.val(selectResult.id);
                }
                currItem3 = null;
            }
            else if (_self.attr("tab-index") == "2") {
                currItem3 = null;
                regionContainer.find("#select2-region-group-item-3").val("");
                regionContainer.find("#select2-region-group-item-3").trigger("change");
                if (selectResult && selectResult.id != " " && selectResult.ChildEntities != null && selectResult.ChildEntities.length > 0) {
                    regionContainer.find("#select2-region-group-item-3").show();
                    regionContainer.find("#select2-region-group-item-3").next().show();
                    currItem3 = selectResult.ChildEntities;
                }
               
                else {
                    $inputValue.val(selectResult.id);
                }
                if (dataLevel == 1) {
                    $inputValue.val(selectResult.id);
                }
            }
            else {
                $inputValue.val(selectResult.id);
            }
        });

        if (parseInt(_self.attr("tab-index")) == 1) {
            if (data_Item1_value && data_Item1_value.id && data_Item1_value.id != " ") {
                _self.append("<option value='" + data_Item1_value.id + "'>" + data_Item1_value.text + "</option>");
                currItem2 = data_Item1_value.ChildEntities;
                _self.trigger("change");
                return;
            }
        }
        else if (parseInt(_self.attr("tab-index")) == 2) {
            if (data_Item2_value && data_Item2_value.id && data_Item2_value.id != " ") {
                _self.show();
                _self.next().show();
                _self.append("<option value='" + data_Item2_value.id + "'>" + data_Item2_value.text + "</option>");
                currItem3 = data_Item2_value.ChildEntities;
                _self.trigger("change");
            }
        }
        else if (parseInt(_self.attr("tab-index")) == 3) {
            if (data_Item3_value && data_Item3_value.id && data_Item3_value.id != " " && data_Item2_value.id != data_Item3_value.id) {
                _self.show();
                _self.next().show();
                _self.append("<option value='" + data_Item3_value.id + "'>" + data_Item3_value.text + "</option>");
                _self.trigger("change");
            }

        }
        var value = _self.val();
        if (index > 1 && (!value || value == "")) {

            _self.css({ "display": "none" });
            _self.next().css({ "display": "none" });
        }

    });

初始化方法

$(".select2-region-group").each(function () {
                InitRegion($(this));
            });

 

html 代碼

<div class="form-group">
                            <label asp-for="RegionId" class="col-md-3 control-label text-right"> 區域</label>
                            <div class="col-md-9   text-left">
                                <div class="input-group m-b text-left col-md-12 select2-region-group"  data-bind-input="#RegionId">
                                    <span class="input-group-addon"></span>
                                    <input asp-for="RegionId" style="display:none;" validate="{required:true    }"/>
                                    <select class="col-md-3 select2-region-group-item"> </select>
                                    <select class="col-md-3 select2-region-group-item"> </select>
                                    <select class="col-md-3 select2-region-group-item">  </select>
                                </div>
                                <span asp-validation-for="RegionId" class="text-danger"></span>
                            </div>
                        </div>

如下是效果 實現了多級聯動