Question

我有两个选择列表，一个选择列表由另一个选择列表的选择填充。我已经订阅了第一个选择框的值，以便每次更改值时更新第二个列表。我没有发现的是如果用户要选择默认值＆＃34;选择...＆＃34;如何重置第二个列表。第一个列表中的选项。

要清楚，该过程有效，除非用户选择默认选项。第二个列表保留了之前的选择。

这是我的代码（这是一个MVC 4应用程序）。

视图模型：

var DashboardReportViewModel = function (config, originalData) {
    var self = this;

    self.breweryCode = ko.observable();
    self.lineCode = ko.observable();
    self.GetBreweries = ko.observableArray([]);
    self.GetLines = ko.observableArray([]);

    var loadBreweries = function () {
        $.ajax({
            url: config.GetBreweries,
            type: "GET",
            error: function (xhr, status, error) {
                alert('loadBreweries error');
            },
            success: function (data) {
                self.GetBreweries(data);
            },
            cache: false
        });
    };

    var loadLines = function () {
        $.ajax({
            url: config.GetLines,
            data: { breweryCode: self.breweryCode() },
            cache: false,
            type: "GET",
            error: function (xhr, status, error) {
                alert('loadLines error');
            },
            success: function (data) {
                self.GetLines(data);
            }
        });
    }

    loadBreweries();
    self.breweryCode.subscribe(function () {
        if (self.breweryCode() != undefined) {
            loadLines();
        }
    });
};

查看：

<select class="ui-select" id="BrewerySelect" name="BrewerySelect" data-bind="options: GetBreweries,
                                                                                             optionsText: 'Text',
                                                                                             optionsValue: 'Value',
                                                                                             value: breweryCode,
                                                                                             optionsCaption: 'Select a Brewery'"></select>

<select class="ui-select" id="LineSelect" name="LineSelect" data-bind="options: GetLines,
                                                                                             optionsText: 'Text',
                                                                                             optionsValue: 'Value',
                                                                                             value: lineCode,
                                                                                             optionsCaption: 'Select a Line'"></select>

Answer 1

我会这样：

self.breweryCode.subscribe(function () {
    if (!!self.breweryCode()) {
        loadLines();
    } else {
        self.GetLines([]);
    }
});

如果self.breweryCode()是真实的，那么将放置一个Ajax调用来加载这些行，否则该列表就完全被清空了。

PS。如果您愿意，也可以使用observableArray utility methods来self.GetLines.removeAll()。

Answer 2

你在这里错过了其他案例：

 self.breweryCode.subscribe(function () {
    if (self.breweryCode() != undefined) {
        loadLines();
    }
    else {
        self.GetLines([]);
    }
});

根据其他选择列表中的选择重置（空）knockout.js选择列表

2 个答案: