Knockout.js 选项绑定 - 删除选项后取消选择选项

Question

我有一个下拉列表（select 控件）使用选项、optionsValue、optionsText 和 optionsCaption 绑定绑定到一个可观察数组。

如果我有一个选项 selected 然后删除它，下拉列表 select 是第一个项目。我希望它将 selected 值设置为 undefined 而不必向可观察数组添加空项。

这是一个简单的例子：

<select data-bind="value: selectedItemValue, options: items, optionsValue: 'value', optionsText: 'text', optionsCaption: ''"></select>
<button type="button" data-bind="click: selectLast">Select Last</button>
<button type="button" data-bind="click: removeLastItem">Remove Last</button>

var viewmodel = function () {
    var self = this;
    this.items = ko.observableArray();
    this.selectedItemValue = ko.observable(null);

    this.selectLast = function () {
        self.selectedItemValue(
        self.items()[self.items().length - 1].value);
    };

    this.removeLastItem = function () {
        self.items.pop();
    };
    this.items.push({
        value: "item1",
        text: "First item"
    });
    this.items.push({
        value: "item2",
        text: "Second item"
    });
    this.items.push({
        value: "item3",
        text: "Third item"
    });
};

var vm = new viewmodel();
ko.applyBindings(vm);

jsfiddle

单击 Select 最后一个按钮或手动 select 下拉列表中的最后一个项目
单击删除最后一个按钮
结果：第一项得到 selected

实现我想要的行为的最佳方法是什么？

Answer 1

在拉取请求中引入 valueAllowUnset：

#647 - 添加允许值绑定接受当前不在选项列表中的选定值的选项

旧的 bug/feature 已修复。因此，如果您将 fiddle 升级为至少使用 KO 版本 3.1，它会像您描述的那样工作：

Demo JSFiddle

Answer 2

除了 nemesv 提到的内容之外，如果最后一个值与当前所选值匹配，您可以简单地删除该值 -

this.removeLastItem = function () {
    var lastItem = self.items()[self.items().length - 1];
    if (self.selectedItemValue() === lastItem.value) {
        self.selectedItemValue(null);
    }
    self.items.pop();
};

http://jsfiddle.net/guvbxor2/4/

基本上只是检查您是否要删除所选的选项，如果是 null 它

Knockout.js 选项绑定 - 删除选项后取消选择选项

Knockout.js options binding - deselecting option when option has been removed

html

javascript

knockout.js