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
时间： 2024-11-06 19:40:24