挖空.js:清除选择元素中的选择

Knockout.js: clear selection in select element

本文关键字：选择 元素 清除 js 挖空      更新时间：2023-09-26

我需要从<select>元素中清除选择。我已经阅读了诸如 Knockoutjs 清除组合框中的选定值之类的帖子，并尝试了公认的答案，但这些解决方案似乎不起作用（不知道自从答案被接受以来，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，这应该反映在 UI 中，绑定的 <select> 元素显示为空白并展开选项列表，不显示任何突出显示的项目。但是，我注意到的是，如果您尝试将绑定值属性（selectedStation）设置为选项数组（stations）中不中的任何内容，则绑定似乎被忽略了。

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

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

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

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

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

只需添加一个"选项标题"，如下所示：

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

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

相关文章：