1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>angularjs select 三级联动</title> 6 7 <script type="text/javascript" src="http://cdn.angularjs.cn/angularjs/1.3.0-beta.17/angular.js"></script> 8 9 <style type="text/css"> 10 label { 11 padding: 5px 10px; 12 border: 1px solid #fff; 13 } 14 .error { 15 border-color: #f00; 16 } 17 </style> 18 19 </head> 20 <body> 21 22 <div ng-controller='cityCtrl'> 23 <label ng-class="{error: error.province}" > 24 省份： 25 <select ng-model="selected" ng-options="s.name for s in list" ng-change="c()" > 26 <option value="">--请选择--</option> 27 </select> 28 </label> 29 <label ng-show="selected.child.length" ng-class="{error: error.city}"> 30 市/区： 31 <select ng-model="selected2" ng-options="sh.name for sh in selected.child" ng-change="c2()" > 32 <option value="">--请选择--</option> 33 </select> 34 </label> 35 <label ng-show="selected2.child.length" ng-class="{error: error.area}"> 36 县级/区域： 37 <select ng-model="selected3" ng-options="x.value for x in selected2.child" ng-change="c3()" > 38 <option value="">--请选择--</option> 39 </select> 40 </label> 41 <input type="submit" value="subimt" ng-click="submit()" /> 42 <br /> 43 {{selected.name}} {{selected2.name}} {{selected3.value}} 44 45 </div> 46 47 48 49 <script type="text/javascript"> 50 51 var app = angular.module('app', []); 52 53 app.controller('cityCtrl', ['$scope', '$http', function ($scope, $http) { 54 $scope.error = {}; 55 $scope.list = []; 56 $http.get('list.json').success(function (data) { 57 $scope.list = data; 58 }); 59 60 61 $scope.c = function () { 62 $scope.error.province = false; 63 $scope.error.city = false; 64 $scope.error.area = false; 65 $scope.selected2 = ""; 66 $scope.selected3 = ""; 67 }; 68 69 $scope.c2 = function () { 70 $scope.error.city = false; 71 $scope.error.area = false; 72 $scope.selected3 = ""; 73 }; 74 75 $scope.c3 = function () { 76 $scope.error.area = false; 77 }; 78 79 $scope.submit = function () { 80 $scope.error.province = $scope.selected ? false : true; 81 $scope.error.city = $scope.selected2 ? false : true; 82 $scope.error.area = $scope.selected3 ? false : true; 83 }; 84 85 86 }]); 87 88 89 90 angular.bootstrap(document, ['app']); 91 92 93 94 </script> 95 96 97 98 </body> 99 </html>
list.json 部分
[ { "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": [] } ] } ]
