從另一個下拉菜單中選擇值時，將選定的值加載到下拉菜單中

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

當我選擇“類型”作為“無”時，它將選擇所有汽車；如果我選擇“無”以外的其他類型，則應僅選擇“充電器”和“萬能”

這是小提琴的鏈接

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

檢查工作提琴 。

---

如果您只想在此處選擇“充電器”和“大酒瓶”，它將變為：

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