jQuery 级联选择/下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18723399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cascading select/dropdowns
提问by ShaunCL
I'm attempting to create a chained/cascading drop-down (select elements) using AngularJS but I'm having difficulty filtering and updating the 'selected' properties with my object properties.
我正在尝试使用 AngularJS 创建一个链式/级联下拉列表（选择元素），但我无法使用我的对象属性过滤和更新“选定”属性。
When the page first loads, the selected items are filtered and displaying in the drop-downs properly. Once I change the parent drop-down, the child selected item doesn't grab the first item in the filtered list, causing the grandchild drop-down to not update.
当页面首次加载时，所选项目会被过滤并正确显示在下拉列表中。一旦我更改了父下拉列表，子选定项不会抓取过滤列表中的第一项，从而导致孙子下拉列表不更新。
Any insight would be greatly appreciated and note that I have the parent/child/grandchild arrays separated (and not in sub-arrays) because I will eventually be pulling my data from separate spocs/tables in SQL. If there is an easy way to create the sub-arrays in JSON then I'd be willing to change the data structure.
任何见解都将不胜感激，并注意我将父/子/孙数组分开（而不是在子数组中），因为我最终将从 SQL 中的单独 spocs/表中提取我的数据。如果有一种简单的方法可以在 JSON 中创建子数组，那么我愿意更改数据结构。
Here's a linkto a coded example
这是一个编码示例的链接
HTML
HTML
<div ng-controller="dropdownCtrl" >
<div>
<select
ng-model="selectedParentItem"
ng-options="p.displayName for p in parentItems">
</select>
</div>
<div>
<select
ng-model="selectedChildItem"
ng-options="c.displayName for c in filteredArray | filter:{parentId:
selectedParentItem.id}">
</select>
</div>
<div>
<select
ng-model="selectedGrandChildItem"
ng-options="g.displayName for g in grandChildItems | filter:{parentId:
selectedChildItem.parentId}">
</select>
</div>
</div>
Controller
控制器
function dropdownCtrl($scope, filterFilter) {
$scope.parentItems = [
{
"id": 0,
"displayName": "parent 00"
},
{
"id": 1,
"displayName": "parent 01"
},
{
"id": 2,
"displayName": "parent 02"
}
];
$scope.selectedParentItem = $scope.parentItems[0];
$scope.childItems = [
{
"id": 0,
"displayName": "child0 of 00",
"parentId": 0
},
{
"id": 1,
"displayName": "child1 of 00",
"parentId": 0
},
{
"id": 2,
"displayName": "child2 of 00",
"parentId": 0
},
{
"id": 3,
"displayName": "child0 of 01",
"parentId": 1
},
{
"id": 4,
"displayName": "child1 of 01",
"parentId": 1
},
{
"id": 5,
"displayName": "child0 of 02",
"parentId": 2
}
];
$scope.filteredArray = [];
$scope.$watch("parentId", function (newValue) {
$scope.filteredArray = filterFilter($scope.childItems, newValue);
$scope.selectedChildItem = $scope.filteredArray[0];
},true);
$scope.grandChildItems = [
{
"id": 0,
"displayName": "grandChild0 of 00",
"parentId": 0
},
{
"id": 1,
"displayName": "grandChild1 of 00",
"parentId": 0
},
{
"id": 2,
"displayName": "grandChild2 of 00",
"parentId": 0
},
{
"id": 3,
"displayName": "grandChild0 of 01",
"parentId": 1
},
{
"id": 4,
"displayName": "grandChild1 of 01",
"parentId": 1
},
{
"id": 5,
"displayName": "grandChild0 of 02",
"parentId": 2
}
];
$scope.selectedGrandChildItem = $scope.grandChildItems[0];
}
回答by sasonic
You don't need a watch on this.. its easier than that. Comment out the filter, then change your ng-option as shown below. note, your last filter looked like it is using the wrong parent id (does the thirddrop down box relate to its parent or grand parent?)
你不需要手表……它比那更容易。注释掉过滤器，然后更改您的 ng-option，如下所示。请注意，您的最后一个过滤器似乎使用了错误的父 ID（第三个下拉框是否与其父或祖父相关？）
<select
class="form-control"
ng-model="selectedParentItem"
ng-options="p.displayName for p in parentItems">
</select>
<select
class="form-control"
ng-model="selectedChildItem"
ng-options="c.displayName for c in childItems | filter:{parentId: selectedParentItem.id}">
</select>
<select
class="form-control"
ng-model="selectedGrandChildItem"
ng-options="g.displayName for g in grandChildItems | filter:{parentId: selectedChildItem.parentId}">
</select>
