创建两个下拉列表框分别来填充省份和地区的数据。
<div class="form-group"> <label for="province">所属省份</label> <select name="province" id="province" class="form-control" ng-model="selectedProvince" ng-options="x['name'] for x in province" ng-change="listCityByProvince()"></select> </div> <div class="form-group"> <label for="city">所属地区</label> <select name="city" id="city" class="form-control" ng-model="selectedCity" ng-options="x['cityName'] for x in city"></select> </div>
ng-change下拉列表框发生改变事件,触发listCityByProvince()方法,这个方法查找当前省份下的所有地区,首先定义并且调用一个listProvince()方法来初始化省份的下拉列表框
$scope.listProvince=function(){ $http({ method:'post', url:'${ctx}/city/handler/listProvince' //data:{id:'${provinceId}'} }).then( function(resp){ //var province=resp['data']; $scope['province']=resp['data']; $scope.selectedProvince=$scope['province'][0]; var province=new Object(); province['id']=$scope.selectedProvince['id']; province['name']=$scope.selectedProvince['name']; //加载省份下地区列表实现二级联动 $http({ method:'post', url:'${ctx}/county/handler/listCityByProvince', data:province }).then( function(resp){ //var province=resp['data']; $scope['city']=resp['data']; $scope.selectedCity=$scope['city'][0]; } ); } ); }; //声明在调用方法之前 $scope.listProvince();
下面来定义ng-change事件触发的方法listCityProvince()
//下拉列表改变事件 $scope.listCityByProvince=function(){ var province=new Object(); province['id']=$scope.selectedProvince['id']; province['name']=$scope.selectedProvince['name']; $http({ method:'post', url:'${ctx}/county/handler/listCityByProvince', data:province }).then( function(resp){ //var province=resp['data']; $scope['city']=resp['data']; $scope.selectedCity=$scope['city'][0]; } ); };
相关推荐
纯angularJS写的二级联动选择菜单,亲测可用 有问题可以联系我
angularjs 城市三级联动 包含各主要城市: name: '北京', cityList: [{ name: '市辖区', areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '...
通过angular JS ,实现购物车的二级联动及增删改查功能。
asp二级联动下拉框,三级联动下拉框,asp二级联动下拉框,三级联动下拉框, 可能传错了 sorry
省市二级联动Access版省市二级联动Access版
二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动
php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果
省市二级联动mysql数据库
全国省市二级联动菜单 JavaScript 全国省市二级联动菜单 JavaScript
datagridview里面使用combobox进行二级联动的一个使用效果。
php+ajax 二级联动 无刷新实现省市县联动。
jquery插件城市二级联动 使用简单 数据是以微信地区数据为例
省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动
一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可
省市二级联动数据
二级联动 下拉列表 可以进行2级联动下拉等功效 完全的代码 用的时候只需要改改数据库就行了
省市下拉框二级联动完成版(调试通过),本人花了几小时整理的,觉得是完整版。并且立即可以使用!
最简单的二级联动源码下载,可以直接使用。
用ajax实现的jsp二级联动下拉列表,使用异步交互的二级联动堪称jsp革命性变动。以前的联动大都是把所有的数据取出来放在javascript中,就一个字------烦
javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单