淘汰多个添加新项目的下拉菜单答案

【问题标题】：Knockout Mutliple Dropdowns that adds new items淘汰多个添加新项目的下拉菜单
【发布时间】：2017-02-19 07:33:00
【问题描述】：

我是否可以有多个下拉菜单（不是特定数量），其中包含项目和一个新项目选项，可将新项目添加到下拉列表中。

例如，大约有 5 个下拉菜单，用户选择项目编号。当他们选择新项目时，它会在列表中添加一个项目

据我所知，不知道如何通过淘汰赛处理这个问题。真的可以吗？

<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select>
<br/>
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select>
<br/>
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select>
<br/>


var Item = function(data){
var self = this;
self.id = ko.observable(data.id);
self.name = ko.observable(data.name);
};
var viewModel = function(data) {
   var self = this;
   self.selectedChoice = ko.observable();
   self.items = ko.observableArray([
        new Item({id: "1", name: "Item 1"}),
        new Item({id: "2", name: "Item 2"}),
        new Item({id: "3", name: "New Item"})]);
    self.sendMe = function(){

        alert(ko.toJSON({ selectedItemId: this.selectedChoice()}));
    };
};

ko.applyBindings(new viewModel());

https://jsfiddle.net/dqUAz/1470/

【问题讨论】：

欢迎来到 Stack Overflow。我正在尝试围绕您的示例进行思考-因此您想要多个下拉菜单中都有一个新的项目选项，并且单击时将另一个
需要在新项目被选中时，会自动添加到列表中。我将有多个下拉菜单，每个都有自己的项目值，所以可能有两个项目 1，一个项目 2，也许一个项目 3。是的，可以向页面添加额外的
每个下拉列表应该是自包含的吗？例如，如果我有 3 个下拉菜单，并且我在第二个下拉菜单上选择了“新项目”，那么其他两个下拉菜单是否也应该获得新项目？
没错，所以如果我从两个项目开始，然后添加了额外的两个项目，我将在所有下拉列表中选择 4 个选项。谢谢。

标签： javascript html mvvm knockout.js

【解决方案1】：

实现此目的的一种方法是订阅 selectedChoice 可观察对象并在选择“新项目”时更新数组：

self.selectedChoice.subscribe(function(newValue) {
    var lastItem = self.items()[self.items().length - 1];
    if (newValue === lastItem.id()) {
        // Add the new item
        var id = self.items().length + 1;
        var name = 'Item ' + self.items().length;
        var item = new Item({id: id, name: name});
        self.items.push(item);

        // Drop and re-add the 'New Item' item so that it remains at the bottom
        self.items.remove(lastItem);
        self.items.push(lastItem);

        // Select the newly added item
        self.selectedChoice(id);
    }
});

小提琴： https://jsfiddle.net/dw1284/60n7078s/2/

【讨论】：