Knockout Mutliple Выпадающие списки, добавляющие новые элементы

Question

Возможно ли, чтобы у меня было несколько выпадающих меню (а не определенная сумма), в которых есть элементы и параметр «Новый элемент», который добавляет новый элемент в раскрывающийся список.

Например, было бы ~ 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/

Answer 1

Одним из способов достижения этого было бы подписаться на selectedChoice наблюдаемым и обновить массив в любое время 'New Item' выбрано:

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); 
    } 
}); 

Fiddle:https://jsfiddle.net/dw1284/60n7078s/2/