前端实现下拉框联动，数组封装成树形结构实现下拉框联动

发布时间：2020-12-17 10:37:22 所属栏目：安全来源：网络整理

导读：一、数组结构的数据，前端处理成叶子节点数据比如说项目中遇到的一级类目，二级类目，三级类目只有选择一级类目之后，才可以选择二级类目，选择了二级类目，才可以选择三级类目。当上一级类目选择变了，他下面的各级类目会被清空，没有选择中。 1、模板文

一、数组结构的数据，前端处理成叶子节点数据

比如说项目中遇到的一级类目，二级类目，三级类目

只有选择一级类目之后，才可以选择二级类目，选择了二级类目，才可以选择三级类目。当上一级类目选择变了，他下面的各级类目会被清空，没有选择中。

1、模板文件

?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]);
                    }
                }
            }

        });</pre>

?PS：一级类目与二级类目，二级类目与三级类目包裹成一个叶子树。

选中的一个是对象不是一个值。

?二、数组结构的数据，前端处理成叶子节点数据（省份与城市的联动）

?后端请求数据

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

模板文件

营业执照地址：

<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></pre>

控制器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系统

?2、云商城消费者门户

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!