澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-06-22 19:37 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

三级联动

 

 

 1 <!DOCTYPE HTML>   2 <html>   3 <head>   4     <meta charset="UTF-8">   5     <title>angularjs select 三级联动</title>   6        7     <script type="text/javascript" src="http://cdn.angularjs.cn/angularjs/1.3.0-beta.17/angular.js"></script>   8        9     <style type="text/css">  10     label {  11         padding: 5px 10px;  12         border: 1px solid #fff;  13     }  14     .error {          15         border-color: #f00;  16     }  17     </style>  18       19 </head>  20 <body>  21   22 <div ng-controller='cityCtrl'>  23     <label ng-class="{error: error.province}" >  24         省份:  25         <select ng-model="selected" ng-options="s.name for s in list" ng-change="c()" >  26             <option value="">--请选择--</option>  27         </select>  28     </label>  29     <label ng-show="selected.child.length" ng-class="{error: error.city}">  30         市/区:  31         <select ng-model="selected2" ng-options="sh.name for sh in selected.child" ng-change="c2()" >  32              <option value="">--请选择--</option>  33         </select>  34     </label>  35     <label ng-show="selected2.child.length" ng-class="{error: error.area}">  36         县级/区域:  37         <select ng-model="selected3" ng-options="x.value for x in selected2.child" ng-change="c3()" >  38              <option value="">--请选择--</option>  39         </select>  40     </label>  41     <input type="submit" value="subimt" ng-click="submit()" />  42     <br />  43     {{selected.name}} {{selected2.name}} {{selected3.value}}  44   45 </div>  46   47   48   49 <script type="text/javascript">  50   51 var app = angular.module('app', []);  52   53 app.controller('cityCtrl', ['$scope', '$http', function ($scope, $http) {  54     $scope.error = {};  55     $scope.list = [];  56     $http.get('list.json').success(function (data) {  57         $scope.list = data;  58     });  59       60       61     $scope.c = function () {  62         $scope.error.province = false;  63         $scope.error.city = false;  64         $scope.error.area = false;  65         $scope.selected2 = "";  66         $scope.selected3 = "";  67     };  68       69     $scope.c2 = function () {         70         $scope.error.city = false;  71         $scope.error.area = false;  72         $scope.selected3 = "";  73     };  74       75     $scope.c3 = function () {  76         $scope.error.area = false;  77     };  78       79     $scope.submit = function () {  80         $scope.error.province = $scope.selected ? false : true;  81         $scope.error.city = $scope.selected2 ? false : true;  82         $scope.error.area = $scope.selected3 ? false : true;  83     };  84       85       86 }]);  87   88   89   90 angular.bootstrap(document, ['app']);  91   92   93   94 </script>  95   96   97       98 </body>  99 </html>

list.json  部分   

 

 

[      {          "id": 0,           "name": "北京",          "code": "001",          "child": [              {                  "id": 0,                   "name": "东城区",                  "child": []              },              {                  "id": 1,                  "name": "西城区",                  "child": []              },              {                  "id": 2,                  "name": "崇文区",                  "child": []              },              {                  "id": 3,                  "name": "宣武区",                  "child": []              },              {                  "id": 4,                   "name": "朝阳区",                  "child": []              },              {                  "id": 5,                  "name": "丰台区",                  "child": []              }          ]      },      {          "id": 1,           "name": "广西",          "code": "002",          "child": [              {                  "id": 0,                   "name": "南宁",                  "child": [                      {"value": "兴宁区"},                      {"value": "青秀区"},                      {"value": "江南区"},                      {"value": "西乡塘区"},                      {"value": "良庆区"},                      {"value": "邕宁区"},                      {"value": "武鸣县"},                      {"value": "隆安县"}                  ]              },              {                  "id": 1,                  "name": "柳州",                  "child": [                      {"value": "城中区"},                      {"value": "鱼峰区"},                      {"value": "柳南区"},                      {"value": "柳北区"}                  ]              },              {                  "id": 2,                  "name": "桂林",                  "child": [                      {"value": "秀峰区"},                      {"value": "叠彩区"},                      {"value": "象山区"}                  ]              },              {                  "id": 3,                  "name": "百色",                  "child": [                      {"value": "右江区"},                      {"value": "平果县"},                      {"value": "田阳县"},                      {"value": "田东县"},                                             {"value": "德保县"}                  ]              }          ]      },      {          "id": 2,           "name": "广东",          "code": "003",          "child": [              {                  "id": 0,                   "name": "广州",                  "child": [                      {"value": "天河区"},                      {"value": "白云区"},                      {"value": "黄埔区"}                  ]              },              {                  "id": 1,                  "name": "深圳",                  "child": [                      {"value": "宝安区"},                      {"value": "南山区"},                      {"value": "福田区"}                  ]              },              {                  "id": 2,                  "name": "珠海",                  "child": []              }          ]      }  ]

图片 1图片 2

View Code

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:三级联动

关键词: 澳门威利斯人