建議對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.效果如圖：
? ? ? ?
)
)
