angularjs select 三级联动

发布时间：2020-12-17 09:45:38 所属栏目：安全来源：网络整理

导读：!DOCTYPE HTMLhtmlhead meta charset="UTF-8" titleangularjs select 三级联动/title script type="text/javascript" src="http://cdn.angularjs.cn/angularjs/1.3.0-beta.17/angular.js"/script style type="text/css" label { padding: 5px 10px; border:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>angularjs select 三级联动</title>
    
    <script type="text/javascript" src="http://cdn.angularjs.cn/angularjs/1.3.0-beta.17/angular.js"></script>
    
    <style type="text/css">
    label {
        padding: 5px 10px;
        border: 1px solid #fff;
    }
    .error {        
        border-color: #f00;
    }
    </style>
    
</head>
<body>

<div ng-controller='cityCtrl'>
    <label ng-class="{error: error.province}" >
        省份：
        <select ng-model="selected" ng-options="s.name for s in list" ng-change="c()" >
            <option value="">--请选择--</option>
        </select>
    </label>
    <label ng-show="selected.child.length" ng-class="{error: error.city}">
        市/区：
        <select ng-model="selected2" ng-options="sh.name for sh in selected.child" ng-change="c2()" >
             <option value="">--请选择--</option>
        </select>
    </label>
    <label ng-show="selected2.child.length" ng-class="{error: error.area}">
        县级/区域：
        <select ng-model="selected3" ng-options="x.value for x in selected2.child" ng-change="c3()" >
             <option value="">--请选择--</option>
        </select>
    </label>
    <input type="submit" value="subimt" ng-click="submit()" />
    <br />
    {{selected.name}} {{selected2.name}} {{selected3.value}}

</div>



<script type="text/javascript">

var app = angular.module('app',[]);

app.controller('cityCtrl',['$scope','$http',function ($scope,$http) {
    $scope.error = {};
    $scope.list = [];
    $http.get('list.json').success(function (data) {
        $scope.list = data;
    });
    
    
    $scope.c = function () {
        $scope.error.province = false;
        $scope.error.city = false;
        $scope.error.area = false;
        $scope.selected2 = "";
        $scope.selected3 = "";
    };
    
    $scope.c2 = function () {       
        $scope.error.city = false;
        $scope.error.area = false;
        $scope.selected3 = "";
    };
    
    $scope.c3 = function () {
        $scope.error.area = false;
    };
    
    $scope.submit = function () {
        $scope.error.province = $scope.selected ? false : true;
        $scope.error.city = $scope.selected2 ? false : true;
        $scope.error.area = $scope.selected3 ? false : true;
    };
    
    
}]);



angular.bootstrap(document,['app']);



</script>


    
</body>
</html>

list.json文件：

[
    {
        "id": 0,"name": "北京","code": "001","child": [
            {
                "id": 0,"name": "东城区","child": []
            },{
                "id": 1,"name": "西城区",{
                "id": 2,"name": "崇文区",{
                "id": 3,"name": "宣武区",{
                "id": 4,"name": "朝阳区",{
                "id": 5,"name": "丰台区","child": []
            }
        ]
    },{
        "id": 1,"name": "广西","code": "002","name": "南宁","child": [
                    {"value": "兴宁区"},{"value": "青秀区"},{"value": "江南区"},{"value": "西乡塘区"},{"value": "良庆区"},{"value": "邕宁区"},{"value": "武鸣县"},{"value": "隆安县"}
                ]
            },"name": "柳州","child": [
                    {"value": "城中区"},{"value": "鱼峰区"},{"value": "柳南区"},{"value": "柳北区"}
                ]
            },"name": "桂林","child": [
                    {"value": "秀峰区"},{"value": "叠彩区"},{"value": "象山区"}
                ]
            },"name": "百色","child": [
                    {"value": "右江区"},{"value": "平果县"},{"value": "田阳县"},{"value": "田东县"},{"value": "德保县"}
                ]
            }
        ]
    },{
        "id": 2,"name": "广东","code": "003","name": "广州","child": [
                    {"value": "天河区"},{"value": "白云区"},{"value": "黄埔区"}
                ]
            },"name": "深圳","child": [
                    {"value": "宝安区"},{"value": "南山区"},{"value": "福田区"}
                ]
            },"name": "珠海","child": []
            }
        ]
    }
]

（编辑：李大同）

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