1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>AngularJS 级联菜单</title> 6 <script id="others_angular_103" type="text/javascript" class="library" src="/js/sandbox/other/angular.min.js"></script> 7 </head> 8 <body> 9 <div class='content' ng-app > 10 <div ng-init="districts=[ 11 {code: '99', name: '省直', units: [ 12 {code: '9901', name: '省单位1', positions: [ 13 {code: '990101', name: '省职位1' }, 14 {code: '990102', name: '省职位2' } 15 ]}, 16 {code: '9902', name: '省单位2', positions: [ 17 {code: '990201', name: '省职位3' }, 18 {code: '990202', name: '省职位4' } 19 ]} 20 ]}, 21 {code: '01', name: '长沙', units: [ 22 {code: '0101', name: '长沙单位1', positions: [ 23 {code: '010101', name: '长沙职位1' }, 24 {code: '010102', name: '长沙职位2' } 25 ]}, 26 {code: '0201', name: '长沙单位2', positions: [ 27 {code: '010201', name: '长沙职位3' }, 28 {code: '010202', name: '长沙职位4' } 29 ]} 30 ]}]" > 31 <select ng-model="selectedDistrict" ng-change="selectedUnit=''" ng-options="district.name for district in districts" > 32 <option value="">---请选择考区---</option> 33 </select> 34 <select ng-model="selectedUnit" ng-change="selectedPosition=''" ng-options="unit.name for unit in selectedDistrict.units"> 35 <option value="">---请选择单位---</option> 36 </select> 37 <select ng-model="selectedPosition" ng-options="unit.name for unit in selectedUnit.positions"> 38 <option value="">---请选择职位---</option> 39 </select> 40 </div> 41 </div> 42 </body> 43 </html>
参考资料地址：http://runjs.cn/code/9paef1xp