<!DOCTYPEhtml>
<htmlng-app="app">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<title>linked dropdowns</title>
<style>
body { font-size: 9pt; } div { padding: 6px; }</style>
</head>
<bodyng-controller="main">
<div>
<selectng-model="m.Level1"ng-options="o as o for o in m.L1Options"></select>
<selectng-model="m.Level2"ng-options="o as o for o in m.L2Options"></select>
<selectng-model="m.Level3"ng-options="o as o for o in m.L3Options"></select>
</div>
<div>
L1 = {{m.Level1}}, L2 = {{m.Level2}}, L3 = {{m.Level3}}</div>
<div>
<selectng-model="m.Path"ng-options="o as o for o in m.PathOptions"></select>
<buttonng-click="m.SetLevels()">Set Levels</button>
</div>
<scriptsrc="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script>
function myViewModel(scope) {var self = this;
self.Level1 = null;
self.Level2 = null;
self.Level3 = null;
//模擬資料
var data = self.Data = {"台北": {"文山": [ "政大" ],
"大安": [ "台大", "台科大" ]
},
"新竹": {"東區": [ "交大", "清大" ]
},
"台南": {"東區": [ "成大" ],
"官田": [ "南藝" ]
}
};
//各Level對應的選項集合
self.L1Options = Object.keys(self.Data);
self.Level1 = self.L1Options[0];
self.L2Options = [];
self.L3Options = [];
//Level1變更時連動L2Options
scope.$watch("m.Level1", function() { self.L2Options = data[self.Level1] ? Object.keys(data[self.Level1]) : [];
//檢查Level2是否在選項中，若無將Level2設定第一筆選項
var idx = $.inArray(self.Level2, self.L2Options);
if (idx == -1) self.Level2 = self.L2Options[0];
});
//Level1或Level2變更時連動L3Options
scope.$watch("m.Level1+'/'+m.Level2", function() { self.L3Options =
data[self.Level1] && data[self.Level1][self.Level2] ?
data[self.Level1][self.Level2] :
[];
//檢查Level3是否在選項中，若無將Level3設定第一筆選項
var idx = $.inArray(self.Level3, self.L3Options);
if (idx == -1 ) self.Level3 = self.L3Options[0];
});
//產生單層資料，形成下拉選單，用來測試更動Level1/Level2/Level3後連動是否正確
var list = [];
self.L1Options.forEach(function(city) { Object.keys(data[city]).forEach(function(area) { data[city][area].forEach(function(school) { list.push(city + "/" + area + "/" + school);
});
});
});
self.Path = "";
self.PathOptions = list;
//按鈕後修改Level1/Level2/Level3
self.SetLevels = function() {var p = self.Path.split('/'); self.Level1 = p[0];
self.Level2 = p[1];
self.Level3 = p[2];
};
}
angular.module("app", []) .controller("main", function ($scope) { $scope.m = new myViewModel($scope);
});
</script>
</body>
</html>
