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