一段很简单的代码实现的全国三级城市联动选择效果 其中布局部分用了bootstrap,通过angularjs实现,这里在js中添加地址数据,只有部分数据展示基本实现功能,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可 html ``` <div class="form-group"> <label class="col-sm-2 control-label">出生地</label> <div class="col-sm-3"> <select class="form-control" ng-change="data.area = false" ng-model="data.province" ng-options="x.id as x.name for x in cities | cityFilter:0"></select> </div> <div class="col-sm-3"> <select class="form-control" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityFilter:data.province"></select> </div> <div class="col-sm-3"> <select class="form-control" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityFilter:data.area"></select> </div> </div> ``` angularjs ``` var app=angular.module('myApp',[]); app .filter('cityFilter', function () { return function(data,parent){ var filterData = []; angular.forEach(data,function(obj){ if(obj.parent === parent){ filterData.push(obj); } }) return filterData; } }) .controller('firstController',function($scope){ $scope.cities =[ { name:'上海', parent:0, id:1 }, { name:'上海市', parent:1, id:2 }, { name:'徐汇区', parent:2, id:8 }, { name:'长宁区', parent:2, id:3 }, { name:'北京', parent:0, id:4 }, { name:'北京市', parent:4, id:5 }, { name:'东城区', parent:5, id:6 }, { name:'丰台区', parent:5, id:7 }, { name:'浙江', parent:0, id:9 }, { name:'杭州', parent:9, id:10 }, { name:'宁波', parent:9, id:11 }, { name:'西湖区', parent:10, id:12 }, { name:'北仓区', parent:11, id:13 } ]; }); ```
angularjs实现地址的三级联动
猜你喜欢
转载自blog.csdn.net/wyq024613/article/details/51425651
今日推荐
周排行