建议对ionic和AnjularJs有一定了解的人可以用到,很多时候我们要用到选择省份、城市、区县的功能,现在就跟着我来实现这个功能吧,用很少的代码(我这里是根据客户的要求,只显示想要显示的部分省份和其相对应的城市、区县,并且这些数据将通过后台放入数据库,并没有引用完整的城市js)
1.首先在所需要的HTML页面需要这些代码,其中的样式都是自己定义的,不喜欢的可以按照自己喜好来写:
<div class="list"> <div class="list" style="border: 0;"> <label class="item item-input item-select" style="border: 0"> <div class="input-label"> <span><span style="color: #6e6e6e"> </span></span> </div> <select style="font-size: 16px" ng-model="data.currentProvinceId" ng-options="pp.Id as pp.RegionName for pp in allProvinces" ng-change="switchProvince(data.currentProvinceId)"> </select> </label> </div> <div class="list" style="border: 0"> <label class="item item-input item-select" style="border: 0"> <div class="input-label"> <span><span style="color: #6e6e6e"> </span></span> </div> <select style="font-size: 16px" ng-options="cc.Id as cc.RegionName for cc in cities" ng-model="data.currentCityId" ng-change="switchCity(data.currentCityId)"> </select> </label> </div> <div class="list" style="border: 0"> <label class="item item-input item-select" style="border: 0"> <div class="input-label"> <span style="color: #6e6e6e"> </span> </div> <select style="font-size: 16px" ng-options="aa.Id as aa.RegionName for aa in areas" ng-model="data.currentAreaId" ng-change="switchArea(data.currentAreaId)"> </select> </label> </div> </div>
2.相应的控制器controller.js里:
.controller(‘selectCityCtrl‘, function ($rootScope, $scope, $state, $filter, $ionicHistory, selectCitySvc, storageSvc, scollImageSvc, classIficationItemSvc) { $scope.currentCity = selectCitySvc.getCurrentCity(); $scope.allRegions = selectCitySvc.getCacheAllAreas(); $scope.allProvinces = [ {Id: 0, RegionName: ‘请选择省份‘} ]; $scope.cities = [ {Id: 0, RegionName: ‘请选择城市‘} ]; $scope.areas = [ {Id: 0, RegionName: ‘请选择区/县‘} ]; $scope.data = { selectName: "", currentProvinceId: 0, currentCityId: 0, currentAreaId: 0 }; function getSelectedRegionId() { var regionId = $scope.data.currentAreaId; if (regionId == 0) { regionId = $scope.data.currentCityId; } if (regionId == 0) { regionId = $scope.data.currentProvinceId; } return regionId; } function updateSelectRegionName() { var currentRegion = $filter(‘filter‘)($scope.allRegions, {Id: getSelectedRegionId()}, true)[0]; if (currentRegion) { $scope.data.selectName = currentRegion.RegionName } else { $scope.data.selectName = ‘‘; } } $scope.switchProvince = function (currentProvinceId) { $scope.data.currentCityId = 0; $scope.data.currentAreaId = 0; $scope.cities.splice(1); $scope.areas.splice(1); var cities = $filter(‘filter‘)($scope.allRegions, {RegionType: 1, ParentId: currentProvinceId}); for (var i in cities) { $scope.cities.push(cities[i]); } updateSelectRegionName(); }; $scope.switchCity = function (currentCityId) { $scope.data.currentAreaId = 0; $scope.areas.splice(1); var areas = $filter(‘filter‘)($scope.allRegions, {RegionType: 2, ParentId: currentCityId}); for (var i in areas) { $scope.areas.push(areas[i]); } updateSelectRegionName(); }; //增加当切换县区的时候更换服务区名 $scope.switchArea = function (currentAreaId) { updateSelectRegionName(); }; var allProvinces = $filter(‘filter‘)($scope.allRegions, {RegionType: 0}); for (var i in allProvinces) { $scope.allProvinces.push(allProvinces[i]); } if ($scope.currentCity.RegionType == 0) { // 如果上次选择省份 $scope.data.currentProvinceId = $scope.currentCity.Id; $scope.switchProvince($scope.currentCity.Id); } else if ($scope.currentCity.RegionType == 1) { var province = $filter(‘filter‘)($scope.allRegions, {Id: $scope.currentCity.ParentId}, true)[0]; $scope.data.currentProvinceId = province.Id; //省份 $scope.switchProvince(province.Id); $scope.data.currentCityId = $scope.currentCity.Id; $scope.switchCity($scope.currentCity.Id); } else if ($scope.currentCity.RegionType == 2) { // 如果上次选择县区 var city = $filter(‘filter‘)($scope.allRegions, {Id: $scope.currentCity.ParentId}, true)[0]; var province = $filter(‘filter‘)($scope.allRegions, {Id: city.ParentId}, true)[0]; $scope.data.currentProvinceId = province.Id; $scope.switchProvince(province.Id); $scope.data.currentCityId = city.Id; $scope.switchCity(city.Id); $scope.data.currentAreaId = $scope.currentCity.Id; } $scope.user = { province: "" || storageSvc.load(‘province.RegionName‘), city: "" || storageSvc.load(‘city.RegionName‘), area: "" || storageSvc.load(‘area.RegionName‘), currentCity: "" || storageSvc.load(‘selectCitySvc.getCurrentCity()‘) }; });
3.效果如图:
时间: 2024-10-14 18:50:01