在从另一个下拉菜单中选择值时加载下拉菜单中选择的值

Load selected values in dropdown on selecting value from another dropdown

本文关键字：选择 下拉菜单 加载 另一个      更新时间：2023-09-26

我有两个下拉列表。当我从一个下拉菜单中选择值时，它会根据选择的内容加载另一个下拉菜单中的值。

这是我的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));

当我选择类型为None时，它会选择所有的汽车，如果我选择类型不是None，那么它应该只选择"Charger"answers"Magnum"

首先，如果要返回所有项，只返回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;
    }
});

检查工作提琴

如果你只想选择"Charger"answers"Magnum"，就像这样:

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