我有两个下拉列表。当我从一个下拉菜单中选择值时,它会根据选择的内容加载另一个下拉菜单中的值。
这是我的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"one_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"one_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] ];
}
});