Camila Waz 发布于
2018-08-17 15:45:35

AngularJS省市区-三级联动下拉列表

AngularJS省市区-三级联动下拉列表
html代码:
<body ng-app="myApp" ng-controller="myCtrl">
  <div>
  选择省:
  <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.city for v in your.province.cities">
    <option value="" ng-if="!your.city">请选择</option>
  </select>
  选择区:
  <select ng-model="your.area" ng-options="v for v in your.city.areas">
    <option value="" ng-if="!your.city">请选择</option>
  </select>
</div>
</body>
JavaScript代码:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.your = {
    province: '',
    city: '',
    area: ''
  };
  $scope.chinaCities = [
    { py: 'sh', province: '上海', cities: [{city:'上海',
    areas:['浦东新区','黄浦区','青浦区','卢湾区','闸北区','静安区']}] },
    { py: 'bj', province: '北京', cities: [{city:'北京',
    areas:['东城区','西城区','崇文区','宣武区','朝阳区']}] },
    { py: 'hb', province: '湖北', cities: [{city:'武汉',
    areas:['江岸区','江汉区','硚口区','武昌区','洪山区']},
    {city:'襄阳',areas:['襄城区','樊城区','襄州区','枣阳市','南漳县','保康县','老河口市']}] }
  ];
  $scope.your.province = $scope.chinaCities[0];
  $scope.your.city = $scope.your.province.cities[0];
  $scope.your.area = $scope.your.city.areas[0];
  $scope.selectedFirstValue = function(province) {
    $scope.your.city = province ? province.cities[0] : '';
    $scope.your.area = province ? province.cities[0].areas[0] : '';
  };
});
</script>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-17/123.html
最后生成于 2020-08-30 17:02:02