AngularJS省市-多级联动下拉列表
gooood个人博客网站
angular
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>