Knockout Mutliple Dropdowns，添加新項目

是否有可能有多個下拉菜單（非特定數量）具有項目和一個新項目選項，將新項目添加到下拉列表中。Knockout Mutliple Dropdowns，添加新項目

例如，會有〜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/

來源

2016-10-10 duffofdean

歡迎來到Stack Overflow。我試圖圍繞您的示例進行打包 - 所以您需要多個下拉菜單，其中都有一個新項目選項，點擊後會在您的頁面上添加另一個標籤添加到頁面 – duffofdean

應該每個下拉列表自包含？如果我有3個下拉列表，並且我在第二個下拉列表中選擇「新項目」，那麼其他兩個下拉列表是否也會獲得新項目？ –

完成，這將是訂閱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/

來源

2016-10-11 16:12:15

Knockout Mutliple Dropdowns，添加新項目

回答

相關問題