Knockout.js：在选择元素中清除选择答案

【问题标题】：Knockout.js: clear selection in select elementKnockout.js：在选择元素中清除选择
【发布时间】：2012-07-03 06:08:44
【问题描述】：

我需要从 <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/

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

【问题讨论】：

标签： javascript knockout.js knockout-2.0 ko.observablearray

【解决方案1】：

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

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

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

【讨论】：

也可以是空字符串，不必包含空格；这对您的情况可能并不重要，但 Select2 用自己的占位符替换空选项，如果它包含空格，则无法做到这一点

【解决方案2】：

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

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

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

【讨论】：