angularjs select 三級聯動

時間 2019-11-08

標籤 angularjs select 三級聯動欄目 AngularJS 简体版

原文原文鏈接

<!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 部分　javascript

[
    {
        "id": 0, 
        "name": "北京",
        "code": "001",
        "child": [
            {
                "id": 0, 
                "name": "東城區",
                "child": []
            },
            {
                "id": 1,
                "name": "西城區",
                "child": []
            },
            {
                "id": 2,
                "name": "崇文區",
                "child": []
            },
            {
                "id": 3,
                "name": "宣武區",
                "child": []
            },
            {
                "id": 4, 
                "name": "朝陽區",
                "child": []
            },
            {
                "id": 5,
                "name": "豐臺區",
                "child": []
            }
        ]
    },
    {
        "id": 1, 
        "name": "廣西",
        "code": "002",
        "child": [
            {
                "id": 0, 
                "name": "南寧",
                "child": [
                    {"value": "興寧區"},
                    {"value": "青秀區"},
                    {"value": "江南區"},
                    {"value": "西鄉塘區"},
                    {"value": "良慶區"},
                    {"value": "邕寧區"},
                    {"value": "武鳴縣"},
                    {"value": "隆安縣"}
                ]
            },
            {
                "id": 1,
                "name": "柳州",
                "child": [
                    {"value": "城中區"},
                    {"value": "魚峯區"},
                    {"value": "柳南區"},
                    {"value": "柳北區"}
                ]
            },
            {
                "id": 2,
                "name": "桂林",
                "child": [
                    {"value": "秀峯區"},
                    {"value": "疊彩區"},
                    {"value": "象山區"}
                ]
            },
            {
                "id": 3,
                "name": "百色",
                "child": [
                    {"value": "右江區"},
                    {"value": "平果縣"},
                    {"value": "田陽縣"},
                    {"value": "田東縣"},                       
                    {"value": "德保縣"}
                ]
            }
        ]
    },
    {
        "id": 2, 
        "name": "廣東",
        "code": "003",
        "child": [
            {
                "id": 0, 
                "name": "廣州",
                "child": [
                    {"value": "天河區"},
                    {"value": "白雲區"},
                    {"value": "黃埔區"}
                ]
            },
            {
                "id": 1,
                "name": "深圳",
                "child": [
                    {"value": "寶安區"},
                    {"value": "南山區"},
                    {"value": "福田區"}
                ]
            },
            {
                "id": 2,
                "name": "珠海",
                "child": []
            }
        ]
    }
]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。