從另一個下拉列表中選擇值時從下拉列表中加載所選值

Question

我有2個下拉列表。當我從一個下拉列表中選擇值時，它會根據選擇的內容在另一個下拉列表中加載值。

這裏是我的html代碼

<select data-bind="options: filters, value: filter"></select> 

<select data-bind="options: filteredItems, optionsText: 'name'"></select> 

這裏是我的淘汰賽代碼

var ViewModel = function(data) { 
var self = this; 
self.filters = ko.observableArray(data.filters); 
self.filter = ko.observable(''); 
self.items = ko.observableArray(data.items); 
self.filteredItems = ko.computed(function() { 
    var filter = self.filter(); 
    if (!filter || filter == "None") { 
     return self.items.slice(0, 6); 
    } else { 
     return self.items.slice(2); 
    } 
    }); 
}; 


    var initialData = { 
    filters: ["None", "Old", "New", "Super"], 
     items: [{ name: "Corvette", type: "Old"}, 
     { name: "Charger", type: "Old"}, 
     { name: "Prius", type: "New"}, 
     { name: "Magnum", type: "New"}, 
     { name: "McLaren", type: "Super"}, 
     { name: "Saleen", type: "Super"}] 


    ko.applyBindings(new ViewModel(initialData)); 

當我選擇類型爲無則選擇所有的汽車，如果我選擇無以外的類型，那麼它應該只選擇「充電器」和「Magnum」

這是鏈接到fiddle

Answer 1

首先，如果你想返回所有項目，只需返回self.items()，這個片就不需要了。 如果你想返回的項目相匹配的過濾器，這應該工作：

self.filteredItems = ko.computed(function() { 
    var myFilter = self.filter(); 
    if (!myFilter || myFilter == "None") { 
     return self.items(); 
    } else { 
     var tempArray = []; 
     for(i=0; i<self.items().length; i++) { 
      if(self.items()[i].type == myFilter) { 
       tempArray.push(self.items()[i]); 
      } 
     } 
     return tempArray; 
    } 
}); 

檢查工作fiddle。

---

如果你只需要選擇「充電」和「夢龍」這裏有雲：

self.filteredItems = ko.computed(function() { 
    var myFilter = self.filter(); 
    if (!myFilter || myFilter == "None") { 
     return self.items(); 
    } else { 
     return [ self.items()[1], self.items()[3] ]; 
    } 
});