angularjs实现地址的三级联动

来源：互联网发布：淘宝店主回复好评编辑：程序博客网时间：2024/05/29 04:55
一段很简单的代码实现的全国三级城市联动选择效果其中布局部分用了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            }        ];    });```
0 0