前端實現下拉框聯動，數組封裝成樹形結構實現下拉框聯動

一、數組結構的數據，前端處理成葉子節點數據

比如說項目中遇到的一級類目，二級類目，三級類目

只有選擇一級類目之后，才可以選擇二級類目，選擇了二級類目，才可以選擇三級類目。當上一級類目選擇變了，他下面的各級類目會被清空，沒有選擇中。

1、模板文件

 <h4 style="margin: 20px 0; font-weight: bold; font-size: 16px;" sat-id="1470710504343"><label class="checkin-title">選擇類目</label></h4>
                <div class="row" sat-id="1470710504344">
                    <!--add-->
                    <div class="col-xs-4" sat-id="1470710504345">
                        <div class="category-list" sat-id="1470710504346">
                            <div class="category-heading" sat-id="1470710504347">
                                <span style="font-weight: bold; font-size: 14px;" sat-id="1470710504348">一級類目</span>
                            </div>
                            <ul class="category-group" sat-id="1470710504349">
                                <li class="category-item" ng-repeat="category in level1Categories" ng-click="selectLevel1Category(category)" ng-class="{true:'selected', false:''}[category==selectedLevel1Category]"
                                    sat-id="1470710504350">
                                    <i class="glyphicon glyphicon-ok" sat-id="1470710504351"></i>
                                    <span sat-id="1470710504352">{{category.categoryName}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-4" sat-id="1470710504345">
                        <div class="category-list" sat-id="1470710504346">
                            <div class="category-heading" sat-id="1470710504347">
                                <span style="font-weight: bold; font-size: 14px;" sat-id="1470710504348">二級類目</span>
                            </div>
                            <ul class="category-group" sat-id="1470710504349">
                                <li class="category-item" ng-repeat="category in level2Categories" ng-click="selectLevel2Category(category)" ng-class="{true:'selected', false:''}[category==selectedLevel2Category]"
                                    sat-id="1470710504350">
                                    <i class="glyphicon glyphicon-ok" sat-id="1470710504351"></i>
                                    <span sat-id="1470710504352">{{category.categoryName}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-4" sat-id="1470710504353">
                        <div class="category-list" sat-id="1470710504354">
                            <div class="category-heading" sat-id="1470710504355">
                                <span style="font-weight: bold; font-size: 14px;" sat-id="1470710504356">三級類目</span>
                            </div>
                            <ul class="category-group" sat-id="1470710504357">
                                <li class="category-item" ng-repeat="category in level3Categories" ng-click="selectLevel3Category(category)" ng-class="{true:'selected', false:''}[category==selectedLevel3Category]"
                                    sat-id="1470710504358">
                                    <i class="glyphicon glyphicon-ok" sat-id="1470710504359"></i>
                                    <span sat-id="1470710504360">{{category.categoryName}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <p ng-if="!!selectedLevel1Category.tips" class="first-category" style="color: #FF6666; padding: 0;" sat-id="1470710504361">
                    <img src="./img/service-category-tip.png" style="margin-top: -5px;" alt="" ng-if="!!selectedLevel1Category.tips" sat-id="1470710504362">{{selectedLevel1Category.tips}}
                </p>
                <div class="row col-xs-12" align="center" sat-id="1470710504363">
                    <button type="submit" class="btn btn-warning button-large" ng-show="selectedDatas.categoryCode==='280' && selectedDatas.categoryName==='詳情模板'" style="margin-top: 20px;margin-bottom: 20px" ng-disabled="!(selectedApp && selectedLevel1Category && selectedLevel2Category)"
                            ng-click="selectCategory(step)" sat-id="1470710504364">下一步
                    </button>
                    <button type="submit" class="btn btn-warning button-large" ng-show="!(selectedDatas.categoryCode==='280' && selectedDatas.categoryName==='詳情模板')" style="margin-top: 20px;margin-bottom: 20px" ng-disabled="!(selectedApp && selectedLevel1Category && selectedLevel2Category && selectedLevel3Category)"
                            ng-click="selectCategory(step)" sat-id="1470710504364">下一步
                    </button>
                </div>
            </div>

 2、控制器

/* 一級類目 */
$scope.level1Categories = [];
$scope.selectedLevel1Category = null;
// $scope.selectLevel1Category = function (category) {
//     $scope.selectedLevel1Category = category;
// };
/* 二級類目 */
$scope.level2Categories = [];
$scope.selectedLevel2Category = null;
/* 三級類目 */
$scope.level3Categories = [];
$scope.selectedLevel3Category = null;

//選擇一級類目與二級類目聯動
$scope.$watch("selectedLevel1Category", function () {
    $scope.level2Categories = [];
    $scope.selectedLevel2Category = null;

    if ($scope.selectedLevel1Category) {
        for (var i = 0; i < categories.length; i++) {
            if (categories[i].parentCategoryCode == $scope.selectedLevel1Category.categoryCode) {
                $scope.level2Categories.push(categories[i]);
            }
        }
    }
});
//選擇二級類目與三級類目聯動
$scope.$watch("selectedLevel2Category", function () {
    $scope.level3Categories = [];
    $scope.selectedLevel3Category = null;

    if ($scope.selectedLevel2Category) {
        for (var i = 0; i < categories.length; i++) {
            if (categories[i].parentCategoryCode == $scope.selectedLevel2Category.categoryCode) {
                $scope.level3Categories.push(categories[i]);
            }
        }
    }
});

 PS：使用的watch監聽是否被選中。

//查詢所有的類目
            ServiceService.queryCategorys().then(function (result) {
　　　　　　　　　　//所有類目的數組
                categories = result;
　　　　　　　　　　//類目1的下拉數組，和類目1的選中對象
                $scope.level1Categories = [];
                $scope.selectedLevel1Category = null;

                for (var i = 0; i < categories.length; i++) {
                    if (categories[i].categoryLayer == "1") {
                        $scope.level1Categories.push(categories[i]);
                    }
                }

                // 為更改為二級目錄暫加
                // $scope.selectedLevel1Category = $scope.level1Categories[0];

                $scope.level2Categories = [];
                $scope.selectedLevel2Category = null;

                if ($scope.selectedLevel1Category) {
                    for (var i = 0; i < categories.length; i++) {
                        if (categories[i].parentCategoryCode == $scope.selectedLevel1Category.categoryCode) {
                            $scope.level2Categories.push(categories[i]);
                        }
                    }
                }

            });

 PS：一級類目與二級類目，二級類目與三級類目包裹成一個葉子樹。

選中的一個是對象不是一個值。

 

 二、數組結構的數據，前端處理成葉子節點數據（省份與城市的聯動）

 

 后端請求數據

 //省份城市信息
                    $scope.provinceCity = results[1].data;

模板文件

<div class="form-group form-group-sp">
                        <label for="licenseProvince" class="col-xs-3 control-label">
                            <span class="required">*</span>營業執照地址：
                        </label>
                        <div class="col-xs-2"
                             ng-class="{true:'has-error'}[(applyForm.licenseProvince.$dirty||needSubmit) && applyForm.licenseProvince.$invalid]">
                            <#--ng-options="province.provinceName as province.provinceName for province in provinceCity"-->
                            <select class="form-control" id="licenseProvince" name="licenseProvince"
                                    ng-options="province.provinceName for province in provinceCity"
                                    ng-model="selectedLicenseProvince" required ng-disabled="getDataread" ng-change="selectAddress()">
                                <option value="">-- 請選擇 --</option>
                            </select>
                        </div>
                        <div class="col-xs-2"
                             ng-class="{true:'has-error'}[(applyForm.licenseCity.$dirty||needSubmit) && applyForm.licenseCity.$invalid]">
                            <select class="form-control" name="licenseCity"
                                    ng-options="city.cityName for city in selectedLicenseProvince.cityList"
                                    ng-model="selectedLicenseCity" required ng-disabled="getDataread">
                                <option value="">-- 請選擇 --</option>
                            </select>
                        </div>

                        <div class="col-xs-4"
                             ng-class="{true:'has-error'}[(applyForm.licenseAddress.$dirty||needSubmit) && applyForm.licenseAddress.$invalid]">
                            <input type="text" class="form-control" name="licenseAddress"
                                   ng-model="applyInfo.licenseAddress" required ng-readonly="getDataread" maxlength="50"
                                   ng-maxlength="50" ng-pattern="/^\S*$/" >
                        </div>
                        <div class="col-xs-6 col-xs-offset-3">
                            <p class="form-control-static text-muted">如果找不到所在城市，可以選擇所在地區或者上級城市。詳細地址不能有空格。</p>
                        </div>
                        <#--<div class="col-xs-3" style="float:right;"-->
                             <#--ng-show="selectedLicenseProvince===null || selectedLicenseCity===null || applyInfo.licenseAddress===''">-->
                            <#--<span class="text-danger"地址填寫不全</span>-->
                        <#--</div>-->
                    </div>

控制器js

 //營業執照地址
                                var provinceCity = $scope.provinceCity;
                                console.log(provinceCity);
                                for (var i = 0; i < provinceCity.length; i++) {
                                    var province = provinceCity[i];
                                    //營業執照所在地
                                    if (province.provinceCode == result.data.provinceCode) {
                                        $scope.selectedLicenseProvince = province;
                                        var licenseCityList = province.cityList;
                                        for (var j = 0; j < licenseCityList.length; j++) {
                                            console.log('cityCode',result.data.cityCode);
                                            if (result.data.cityCode!==undefined && licenseCityList[j].cityCode == result.data.cityCode) {
                                                $scope.selectedLicenseCity = licenseCityList[j];
                                                break;
                                            }else{
                                                $scope.selectedLicenseCity = null;
                                            }
                                        }
                                    }
                                }

 

歡迎訪問：

1、雲商城isv系統http://isv.suningcloud.com/mpisv-web/index

 2、雲商城消費者門戶http://www.suningcloud.com/promotion/index/experience_center.html