Knockout.js 选项绑定 - 删除选项时取消选择选项答案

【问题标题】：Knockout.js options binding - deselecting option when option has been removedKnockout.js 选项绑定 - 删除选项时取消选择选项
【发布时间】：2015-03-22 23:15:36
【问题描述】：

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

如果我选择了一个选项，然后将其删除，则下拉菜单会选择第一项。我希望它将选定的值设置为未定义，而不必向可观察数组添加一个空项。

这是一个简单的例子：

<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

单击“选择最后一项”按钮或手动选择下拉菜单中的最后一项
单击“删除最后一个”按钮
结果：第一个项目被选中

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

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

在拉取请求中引入valueAllowUnset：

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

这个旧错误/功能已得到修复。因此，如果您将小提琴升级为至少使用 KO 3.1 版，它会按照您的描述工作：

Demo JSFiddle

【讨论】：

谢谢，由于某种原因没有出现在我的搜索结果中。只是为了进一步详细说明：只需升级到 3.1 即可实现我想要的行为（取消选择并将值设置为 null）。将 valueAllowUnset 设置为 true 将取消选择并保持值不变，即使下拉列表中没有匹配的值。

【解决方案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它

【讨论】：