angularjs实现地址的三级联动

一段很简单的代码实现的全国三级城市联动选择效果
其中布局部分用了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
            }
        ];
    });
```

猜你喜欢

转载自blog.csdn.net/wyq024613/article/details/51425651