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": [] } ] } ]