javascript - 別のドロップダウンから値を選択すると、選択した値がドロップダウンに読み込まれます

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

Type に None を選択すると、すべての Cars が選択され、None 以外のタイプを選択すると、「Charger」と「Magnum」のみが選択されます。

ここにフィドルへのリンクがあります