Camila Waz 发布于
2018-08-17 15:40:26

AngularJS省市-多级联动下拉列表

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>
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-17/122.html
最后生成于 2020-08-30 17:02:02