网站推广营销效果,网站制作协议,跨境进口网站怎么做,交友系统网站建设建议对ionic和AnjularJs有一定了解的人可以用到#xff0c;很多时候我们要用到选择省份、城市、区县的功能#xff0c;现在就跟着我来实现这个功能吧#xff0c;用很少的代码#xff08;我这里是根据客户的要求#xff0c;只显示想要显示的部分省份和其相对应的城市、区县…建议对ionic和AnjularJs有一定了解的人可以用到很多时候我们要用到选择省份、城市、区县的功能现在就跟着我来实现这个功能吧用很少的代码我这里是根据客户的要求只显示想要显示的部分省份和其相对应的城市、区县并且这些数据将通过后台放入数据库并没有引用完整的城市js 1.首先在所需要的HTML页面需要这些代码其中的样式都是自己定义的不喜欢的可以按照自己喜好来写 div classlistdiv classlist styleborder: 0;label classitem item-input item-select styleborder: 0div classinput-labelspanspan stylecolor: #6e6e6e /span/span/divselect stylefont-size: 16px ng-modeldata.currentProvinceIdng-optionspp.Id as pp.RegionName for pp in allProvincesng-changeswitchProvince(data.currentProvinceId)/select/label/divdiv classlist styleborder: 0label classitem item-input item-select styleborder: 0div classinput-labelspanspan stylecolor: #6e6e6e /span/span/divselect stylefont-size: 16px ng-optionscc.Id as cc.RegionName for cc in citiesng-modeldata.currentCityId ng-changeswitchCity(data.currentCityId)/select/label/divdiv classlist styleborder: 0label classitem item-input item-select styleborder: 0div classinput-labelspan stylecolor: #6e6e6e /span/divselect stylefont-size: 16px ng-optionsaa.Id as aa.RegionName for aa in areasng-modeldata.currentAreaId ng-changeswitchArea(data.currentAreaId)/select/label/div/div2.相应的控制器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.效果如图        转载于:https://www.cnblogs.com/xiaojun-zxj/p/4766704.html