来自同一来源的淘汰赛级联列表答案

【问题标题】：Knockout cascading List from same source来自同一来源的淘汰赛级联列表
【发布时间】：2014-04-05 12:53:51
【问题描述】：

我需要在我的 UI 中显示 5 个下拉列表，其中填充了一个 Knockout ObservableArray。所有 5 个都从同一个源 ko.observableArray([]) 读取。

我有两个问题：

如何使每个选项仅在该选项被选中后才变为活动状态？应该只激活第一个下拉菜单，一旦做出选择，然后激活第二个，直到用户选择了所有 5 个。
每个下拉列表都从同一个 observableArray 中读取，但我不希望用户能够选择与之前的下拉列表相同的选项。如何使第二个下拉列表显示所有选项，不包括在第一个下拉列表中选择的选项？如何使第三个下拉列表显示所有选项，不包括在第一个和第二个下拉列表中选择的内容？我可以从不同来源加载级联下拉菜单，但我真的不想进行 5 个单独的 $.getJSON 调用，我更喜欢在初始 pageLoad 调用一个。

我发现了一些关于级联选择列表的先前问题，但不是从同一来源阅读...

【问题讨论】：

标签： drop-down-menu knockout.js cascadingdropdown

【解决方案1】：

您可以使用enable 绑定将前一个选择value 与第二个选择连接起来。

因此，当您在第一个下拉菜单中选择某些内容时，firstValue 将包含所选值，因此 enable: firstValue 将为真，它将启用第二个下拉菜单

<select data-bind="options: options, optionsText: 'value', 
                   optionsCaption: '', value: firstValue"></select>
<select data-bind="options: secondOptions, optionsText: 'value', 
                   optionsCaption: '',value: secondValue, 
                   enable: firstValue"></select>

要解决“级联”问题，您可以使用计算属性来填充选项，过滤掉已选择的值：

var VM = function () {

    this.options = ko.observableArray(/* load your original options here */);

    this.firstValue = ko.observable();
    this.secondValue = ko.observable();

    this.secondOptions = ko.computed(function () {
        return ko.utils.arrayFilter(this.options(), function (item) {
            return item != firstValue();
        });
    }, this);
}

并将这些模式应用于其他 3 个下拉菜单。

演示JSFiddle.

【讨论】：