前端开发 AngularJS制作省市区三级联动

阿里web前端开发面试|前端开发需要对jsp了解多少|初学后端还是前端开发

html 代码

<!DOCTYPE html>
<html ng-app=”myModule”>
<head>
    <meta charset=”utf-8″>
    <script src=”http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js”></script>
    <script>
        var myModule = angular.module(‘myModule’, []);
        myModule.controller(‘myctrl’, function ($scope) {
            $scope.regionData = [
                {
                    “id”: “110000”,
                    “parentId”: null,
                    “text”: “北京市”,
                    “children”: [
                        {
                            “id”: “110100”,
                            “parentId”: null,
                            “text”: “市辖区”,
                            “children”: [
                                {
                                    “id”: “110101”,
                                    “parentId”: null,
                                    “text”: “东城区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110102”,
                                    “parentId”: null,
                                    “text”: “西城区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110103”,
                                    “parentId”: null,
                                    “text”: “崇文区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110104”,
                                    “parentId”: null,
                                    “text”: “宣武区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110105”,
                                    “parentId”: null,
                                    “text”: “朝阳区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110106”,
                                    “parentId”: null,
                                    “text”: “丰台区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110107”,
                                    “parentId”: null,
                                    “text”: “石景山区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110108”,
                                    “parentId”: null,
                                    “text”: “海淀区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110109”,
                                    “parentId”: null,
                                    “text”: “门头沟区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110111”,
                                    “parentId”: null,
                                    “text”: “房山区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110112”,
                                    “parentId”: null,
                                    “text”: “通州区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110113”,
                                    “parentId”: null,
                                    “text”: “顺义区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110114”,
                                    “parentId”: null,
                                    “text”: “昌平区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110115”,
                                    “parentId”: null,
                                    “text”: “大兴区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110116”,
                                    “parentId”: null,
                                    “text”: “怀柔区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110117”,
                                    “parentId”: null,
                                    “text”: “平谷区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                }
                            ],
                            “statNum”: 0
                        },
                        {
                            “id”: “110200”,
                            “parentId”: null,
                            “text”: “县”,
                            “children”: [
                                {
                                    “id”: “110228”,
                                    “parentId”: null,
                                    “text”: “密云县”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “110229”,
                                    “parentId”: null,
                                    “text”: “延庆县”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                }
                            ],
                            “statNum”: 0
                        }
                    ],
                    “statNum”: 0
                },
                {
                    “id”: “120000”,
                    “parentId”: null,
                    “text”: “天津市”,
                    “children”: [
                        {
                            “id”: “120100”,
                            “parentId”: null,
                            “text”: “市辖区”,
                            “children”: [
                                {
                                    “id”: “120101”,
                                    “parentId”: null,
                                    “text”: “和平区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120102”,
                                    “parentId”: null,
                                    “text”: “河东区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120103”,
                                    “parentId”: null,
                                    “text”: “河西区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120104”,
                                    “parentId”: null,
                                    “text”: “南开区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120105”,
                                    “parentId”: null,
                                    “text”: “河北区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120106”,
                                    “parentId”: null,
                                    “text”: “红桥区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120107”,
                                    “parentId”: null,
                                    “text”: “塘沽区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120108”,
                                    “parentId”: null,
                                    “text”: “汉沽区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120109”,
                                    “parentId”: null,
                                    “text”: “大港区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120110”,
                                    “parentId”: null,
                                    “text”: “东丽区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120111”,
                                    “parentId”: null,
                                    “text”: “西青区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120112”,
                                    “parentId”: null,
                                    “text”: “津南区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120113”,
                                    “parentId”: null,
                                    “text”: “北辰区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120114”,
                                    “parentId”: null,
                                    “text”: “武清区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120115”,
                                    “parentId”: null,
                                    “text”: “宝坻区”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                }
                            ],
                            “statNum”: 0
                        },
                        {
                            “id”: “120200”,
                            “parentId”: null,
                            “text”: “县”,
                            “children”: [
                                {
                                    “id”: “120221”,
                                    “parentId”: null,
                                    “text”: “宁河县”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120223”,
                                    “parentId”: null,
                                    “text”: “静海县”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                },
                                {
                                    “id”: “120225”,
                                    “parentId”: null,
                                    “text”: “蓟 县”,
                                    “children”: [
                                    ],
                                    “statNum”: 0
                                }
                            ],
                            “statNum”: 0
                        }
                    ]
                }];
            $scope.citys = [];
            $scope.districts = [];
            $scope.regionText = {};
            $scope.$watch(‘selectedProvince’, function (newValue, oldValue) {
                //debugger;
                console.log(newValue, oldValue);
                if (newValue != oldValue) {
                    var i = 0; len = $scope.regionData.length;
                    if (!newValue) { //判断选择的是否选择省份,如果没有则重置市区
                        $scope.citys = [];
                        $scope.districts = [];
                        return;
                    }
                    for (i; i < len; i++) {
                        if ($scope.regionData[i].id == $scope.selectedProvince) {
                            $scope.citys = $scope.regionData[i].children;
                            $scope.regionText.selectedProvinceText = $scope.regionData[i].text;
                            console.log(‘省名’, $scope.regionText.selectedProvinceText);
                        }
                    }
                    $scope.districts = [];
                }
            });
            $scope.$watch(‘selectedCity’, function (newValue, oldValue) {
                //debugger;
                if (newValue != oldValue) {
                    if (!newValue) { //作用同上
                        $scope.districts = [];
                        return;
                    }
                    var i = 0; len = $scope.citys.length;
                    for (i; i < len; i++) {
                        if ($scope.citys[i].id == $scope.selectedCity) {
                            $scope.districts = $scope.citys[i].children;
                            $scope.regionText.selectedCityText = $scope.citys[i].text;
                            console.log(‘市名’, $scope.regionText.selectedCityText);
                        }
                    }
                }
            });
            $scope.districtObj = {};
            $scope.$watch(‘selectedDstrict’, function (newValue, oldValue) {
                if (newValue != oldValue) {
                    var i = 0; len = $scope.districts.length;
                    for (i; i < len; i++) {
                        if ($scope.districts[i].id == $scope.selectedDstrict) {
                            $scope.districtObj = $scope.districts[i];
                            $scope.regionText.selectedDstrictText = $scope.districts[i].text;
                            console.log(‘区名’, $scope.regionText.selectedDstrictText);
                        }
                    }
                }
            });
            /*console.log($scope.districtObj,$scope.regionText.selectedDstrictText);
            console.log($scope.regionText);*/
        });
    </script>
</head>
<body>
    <div ng-controller=”myctrl”>
        <select required=”” class=”form-control” ng-model=”selectedProvince” ng-options=”item.id as item.text for item in regionData”>
            <option value=””>省</option>
        </select>
        <select class=”form-control” ng-model=”selectedCity” ng-options=”item.id as item.text for item in citys”>
            <option value=””>市</option>
        </select>
        <select class=”form-control” ng-model=”selectedDstrict” ng-options=”item.id as item.text for item in districts”>
            <option value=””>区</option>
        </select>
    </div>
</body>
</html>

谷歌浏览器的前端开发工具|前端开发面试基础题|前端开发和后端开发怎么对接

» 本文来自:前端开发者 » 《前端开发 AngularJS制作省市区三级联动》
» 本文链接地址:https://www.rokub.com/5206.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!