3

我需要清除<select>元素中的选择。我已经阅读了诸如Knockoutjs clear selected value in combobox之类的帖子，并尝试了接受的答案，但这些解决方案似乎不起作用（不知道自答案被接受后 Knockout 2 中是否发生了变化？） .

这是一个示例视图模型：

var ClearSelectionViewModel = function () {
    var self = this;

    self.station = ko.observable();

    self.selectedStation = ko.observable();
    self.selectedStation.subscribe(function (value) {
        self.station(value);
    });

    self.stations = ko.observableArray(['CLT', 'PHL', 'PHX', 'PIT']);

    self.clearSelectedStation = function () {
        self.selectedStation(null);
    };
};

ko.applyBindings(new ClearSelectionViewModel());​

调用时clearSelectedStation，绑定视图模型属性应设置为null，这应通过绑定<select>元素显示为空白并扩展选项列表显示没有突出显示的项目来反映在 UI 中。但是，我注意到的是，如果您尝试将绑定值属性 ( selectedStation) 设置为选项数组 () 之外的任何内容stations，则绑定似乎会被忽略。

这个小提琴说明了我在说什么：http: //jsfiddle.net/sellmeadog/Su8Zq/1/

如果不需要，我不想用空白值“污染”选项数组。我想知道如何使链接帖子中的解决方案起作用。

4

2 回答 2

8

一种选择是optionsCaption对“未选择”值使用附加绑定。它必须设置为某个值才能使用，但您可以将其设置为" ".

<select data-bind="optionsCaption: ' ', options: stations, value: selectedStation"></select>

示例：http: //jsfiddle.net/rniemeyer/Su8Zq/3/

于 2012-07-02T20:11:53.533 回答
2

只需添加一个“optionsCaption”，如下所示：

<select data-bind="options: stations, value: selectedStation, optionsCaption: '-- SELECT --'"></select>

更新小提琴：http: //jsfiddle.net/Su8Zq/2/

于 2012-07-02T20:12:03.730 回答