击倒多个下拉菜单，添加新项目

Knockout Mutliple Dropdowns that adds new items

本文关键字：添加 新项目 下拉菜单      更新时间：2023-09-26

是否有可能让我有多个下拉菜单(不是特定数量)，其中有项目和一个新项目选项，将新项目添加到下拉列表。

例如，将有~5个下拉框，用户选择项目编号。当他们选择New Item时，它会向列表中添加一个Item

这是到目前为止，我得到它，不知道我如何处理这个问题与淘汰。这真的可能吗?

<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/

实现此目的的一种方法是订阅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);
    }
});

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

相关文章：