AngularJS省市-多级下拉列表
html代码：
<body ng-app="myApp" ng-controller="myCtrl">
<div>
方法1：
<select ng-model="your.province" ng-options="v.province for v in chinaCities">
<option value="">请选择</option>
</select>
选择市：
<select ng-model="your.city" ng-options="v for v in your.province.cities">
<option value="">请选择</option>
</select>
</div>
<hr/>
<div>
方法2：
<select ng-model="your.province" ng-options="v.province for v in chinaCities"
ng-change="selectedFirstValue(your.province)">
<option value="">请选择</option>
</select>
选择市：
<select ng-model="your.city" ng-options="v for v in your.province.cities">
<option value="">请选择</option>
</select>
</div>
<hr/>
<div>
方法3：
<select ng-model="your.province" ng-options="v.province for v in chinaCities"
ng-change="selectedFirstValue(your.province)">
<option value="" ng-if="!your.province">请选择</option>
</select>
选择市：
<select ng-model="your.city" ng-options="v for v in your.province.cities">
<option value="" ng-if="!your.city">请选择</option>
</select>
</div>
<hr/>
<div>
方法4：
<select ng-model="your.province" ng-options="v.province for v in chinaCities"
ng-change="selectedFirstValue(your.province)">
<option value="" ng-if="!chinaCities && !your.province">请选择</option>
</select>
选择市：
<select ng-model="your.city" ng-options="v for v in your.province.cities">
<option value="" ng-if="!your.city">请选择</option>
</select>
</div>
<hr/>
<div>
方法5：
<select ng-model="your.province" ng-options="v.province for v in chinaCities"
ng-change="selectedFirstValue(your.province)">
<option value="" ng-if="!chinaCities && !your.province">请选择</option>
</select>
选择市：
<select ng-model="your.city" ng-options="v for v in your.province.cities">
<option value="" ng-if="!your.city">请选择</option>
</select>
</div>
<hr/>
<div>
（选择信息：province={{ your.province }} city={{ your.city }}）
</div>
</body>
JavaScript代码：
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.your = {
province: '',
city: ''
};
$scope.chinaCities = [
{ py: 'sh', province: '上海', cities: ['上海'] },
{ py: 'bj', province: '北京', cities: ['北京'] },
{ py: 'hb', province: '湖北', cities: ['武汉','鄂州',
'恩施','黄冈','黄石','荆门','荆州','十堰','随州','咸宁','襄阳','孝感','宜昌'] },
{ py: 'zj', province: '浙江', cities: ['杭州','宁波',
'湖州','嘉兴','金华','绍兴','台州','温州','舟山','衢州','丽水'] },
{ py: 'nmg', province: '内蒙古', cities: ['呼和浩特',
'包头','阿拉善','巴彦淖尔','赤峰','呼伦贝尔','乌海',
'乌兰察布','锡林郭勒','兴安','鄂尔多斯','通辽'] },
{ py: 'yn', province: '云南', cities: ['昆明','西双版纳',
'保山','楚雄','大理','德宏','红河','丽江','临沧','怒江',
'曲靖','思茅','文山','玉溪','昭通','迪庆州'] }
];
$scope.your.province = $scope.chinaCities[0];
$scope.your.city = $scope.chinaCities[0].cities[0];
$scope.selectedFirstValue = function(province) {
$scope.your.city = province ? province.cities[0] : '';
};
});
</script>
1230博客
热门推荐：