Question

我需要在我的UI中显示5个下拉列表，并使用Knockout ObservableArray填充。所有5个来自相同的源ko.observableArray（[]）。

我有两个问题：

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

我已经在级联选择列表上找到了一些先前的问题，但是没有从同一个来源读取...

Answer 1

您可以使用enable绑定将之前的选择value与第二个选择相关联。

因此，当您在第一次下拉菜单中选择某些内容时，firstValue将包含所选值，因此enable: firstValue将为true，并且会启用第二个下拉列表

<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。

Knockout级联列表来自同一来源

1 个答案: