<!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": "西城区",
"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": []
}
]
}
]