Angular JS 下拉列表 联动

浏览数：47 / 时间：2015年06月09日

目的是選擇縣市後，要對應下該縣市下的地區與郵遞區號，如圖所示。

技术分享

首先，先建立好Html元素

1 <div>
2   <select>
3     <option value="">--請選擇--</option>
4   </select>
5         
6      <select >
7     <option value="">--請選擇--</option>
8   </select>
9 </div>

放入Angularjs tag

01 <body ng-app="">
02   <div ng-controller="zip">
03   <select ng-model="SelCity" ng-options="City.name for City in Citys" ng-change="update(SelCity)">
04     <option value="">--請選擇--</option>
05   </select>
06         
07      <select ng-model="SelArea" ng-options="SelCity for  SelCity in level2" >
08     <option value="">--請選擇--</option>
09   </select>
10   </div>
11   </body>

建立controller 與 model

01 function zip ($scope) //controller 名稱
02 {
03   $scope.Citys= //model 內容
04     [
05       {
06         name:"台北市",
07         areas:["中正區100", "大同區103", "中山區104", "松山區105", "大安區106", "萬華區108", "信義區110", "士林區111", "北投區112", "內湖區114", "南港區115", "文山區116"]
08       },
09        
10       {
11         name:"新北市",
12         areas: ["萬里鄉207", "金山鄉208", "板橋市220", "汐止市221", "深坑鄉222", "石碇鄉223", "瑞芳鎮224", "平溪鄉226", "雙溪鄉227", "貢寮鄉228", "新店市231", "坪林鄉232", "烏來鄉233", "永和市234", "中和市235", "土城市236", "三峽鎮237", "樹林市238", "鶯歌鎮239", "三重市241", "新莊市242", "泰山鄉243", "林口鄉244", "蘆洲市247", "五股鄉248", "八里鄉249", "淡水鎮251", "三芝鄉252", "石門鄉253"]
13       },
14       {
15       name:"基隆市",
16       areas:["仁愛區200", "信義區201", "中正區202", "中山區203", "安樂區204", "暖暖區205", "七堵區206"]
17       }
18     ];

當選擇縣市的時候，要動態再產生次選單的區域與郵遞區號。用到 ng-change 並放入一個函式 update() 並把選擇到的值傳入函式

1 ng-change="update(SelCity)

寫下第2層選單內容

view source
 
print?
1 $scope.update = function (selectedValue) {
2    $scope.level2 = selectedValue.areas;
3    };

其實這樣就可以完成雙層動態下拉選單了。

完整程式碼連結  : http://jsbin.com/iYEdOBI/44/edit

 

原文：http://www.dotblogs.com.tw/hsuizip/archive/2014/01/28/142382.aspx

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class com log src html http it la ha class com log src html http it la ha

相关文章

随机文章

您可能还喜欢

您可能还喜欢