在AnguarJs中，下拉列表别使用ng-options来实现。
<!DOCTYPE HTML>
<html><head>
<meta charset="UTF-8"> <title>angularjs select 三级联动</title><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.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'>
省份：
<select ng-model="selected" ng-options="s.name for s in list" ng-change="c()"> <option value="">--请选择--</option> </select><select ng-model="selected2" ng-options="sh.name for sh in selected.child" ng-change="c2()">
<option value="">--请选择--</option> </select><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> <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.area = false;
$scope.selected2 = ""; $scope.selected3 = ""; };$scope.c2 = function() {
$scope.error.area = false;
$scope.selected3 = "";};$scope.c3 = function() {
$scope.error.area = false;};}]);
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": [] } ] }]