ノックアウト新しいアイテムを追加する複数のドロップダウン

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に加入すると、アレイいつでも '新規アイテム' を更新するだろうこれを達成する一つの方法が選択されている：

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/