index.html
<!doctype html> <html ng-app="ngShowcaseApp"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-1.9.1.js"></script> <script src="angular1.2.15.js"></script> <script src="app.js"></script> <script src="controllers.js"></script> <script src="data.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body ng-controller="ngShowcaseController"> <div class="row"> <div class="col-md-4"> <select class="form-control" ng-model="vm.country" ng-options="country.label for country in vm.countries"> <option value="">-- 请选择国家 --</option> </select> </div> <div class="col-md-4" ng-if="vm.country.provinces"> <select class="form-control" ng-model="vm.province" ng-options="province.label for province in vm.country.provinces"> <option value="">-- 请选择省份/州 --</option> </select> </div> <div class="col-md-4" ng-if="vm.province.cities"> <select class="form-control" ng-model="vm.city" ng-options="city.label for city in vm.province.cities"> <option value="">-- 请选择城市/县区 --</option> </select> </div> </div> <div>您选择的是:{{vm.country.label}} - {{vm.province.label}} - {{vm.city.label}}</div> <div class="alert alert-info"> 这里使用ng-if指令来达到下一级有数据才显示下一级的效果 </div> </body> </html>
app.js
'use strict'; /* App Module */ var md = angular.module('ngShowcaseApp', ['ctrl.select.cascade']);
controllers.js
'use strict'; /* Controllers */ var controllerModule = angular.module("ctrl.select.cascade", []); var ctrl = [ '$scope', 'CityData', function( $scope, CityData ) { var vm = $scope.vm = {}; vm.countries = CityData; // 更换国家的时候清空省 $scope.$watch('vm.country', function(country) { vm.province = null; }); // 更换省的时候清空城市 $scope.$watch('vm.province', function(province) { vm.city = null; }); }]; controllerModule.controller( "ngShowcaseController", ctrl );
data.js
'use strict'; angular.module('ngShowcaseApp').constant('CityData', [ { label: '中国', flag: 'cn.png', provinces: [ { label: '北京', cities: [ { label: '朝阳区' }, { label: '宣武区' }, { label: '海淀区' } ] }, { label: '河北', cities: [ { label: '石家庄' }, { label: '承德' }, { label: '唐山' } ] } ] }, { label: '美国', flag: 'us.png', provinces: [ { label: '纽约', cities: [ { label: '曼哈顿区' }, { label: '皇后区' } ] }, { label: '德克萨斯州', cities: [ { label: '休斯顿' }, { label: '达拉斯' } ] }, { label: '加利福尼亚州' } ] } ]);
运行结果:
参考资源:http://www.ngnice.com/showcase/#/select/cascade?utm_source=TZ
相关推荐
angularjs 编写的省市区下拉框三级级联自定义指令,包含了2018年1月最新的全国省市区数据(json)
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框下拉级联框
在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。
使用jsp脚本语言实现三级级联查询,效果,当你选择某一个省,相应显示该省的市,选择市,就相应弹出县
基于jQuery实现的多级级联下拉列表,返回数据类型JSON,后台使用Struts1.2
JavaScript动态级联下拉列表框,内有样例,仅供参考和学习
jsp出生日期三级级联下拉列表,今晚做的,呵呵!分享下!
通过jsp以及ajax来实现三级级联下拉列表
可编辑的级联下拉列表框 漂亮的可编辑的下拉列表框 巧妙的方法实现了级联 jquery实现
DWR+hibernate+spring级联下拉列表框 DWR+hibernate+spring级联下拉列表框
网上级联菜单确有不少,单大多是直接写死到jsp页面中的,本代码是用mysql的数据库实现的,希望对大家有帮助!!!
WPF、Prism实现ComboBox省市县三级级联
uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip
群里朋友需要,自己摸索出来的birt报表二级级联下拉的实现,用自带数据源,可以直接运行。
NULL 博文链接:https://chenjia66804610.iteye.com/blog/576463
js写的树状地区,包括地区和省市,还带复选框,可多选~~