Javascript 淘汰JS过滤

我有一个表，这是与淘汰JS绑定，并希望添加2个过滤器。一个下拉列表要过滤面板，已经有一个面板下拉列表Additional1FormPage to Additional5FormPage当选择它时，应该只显示带有此选定面板的行。用于筛选存档的其他下拉列表：

self.archiveOptions = ko.observableArray(['Archive', 'Not Archived', 'All']);

如果选择了“存档”，则它应仅过滤存档日期有值的行

如果选择了“Not Archive”（不存档），则应仅在存档日期为null或为空时过滤行

如果选择“全部”，则应显示存档日期是否有值的所有行

过滤器应该一起工作，以便根据两个下拉列表过滤表

JS:

HTML:

附加问题工具
编辑
取消
请注意:


开始日期应为招聘轮中第一个空缺职位的日期
存档日期应为招聘轮次中打开的最后一个职位的日期
拼写错误和公司名称更改是唯一允许对问题文本进行的更改

其他问题
问题:
面板
开始日期
存档日期
字数
命令
编辑
@**@
@*
*@
加载。。。
$（文档）.ready（函数（）{
var viewModel=新的附加问题viewModel（）；
应用绑定（viewModel，document.getElementById（“附加问题”）；
load（）；
});

---

非常感谢您提供的任何帮助

使用KO计算出两个下拉选择值的交点，以过滤问题。这是您的代码和逻辑的粗略模型

self.archiveOptions = ko.observableArray(["Archive", "Not Archived", "All"]);
self.selectedArchive = ko.observable(); // Bound to the drop down
self.panelOptions = ko.observableArray(["Panel1", "Panel2"]);
self.selectedPanel = ko.observable(); // Bound to the drop down
self.questions = ko.observableArray([]); // Populated with XHR call
self.filteredQuestions = ko.pureComputed(function() {
  return self.questions().filter(function(question) {
    return question.panel === self.selectedPanel() &&
      self.selectedArchive() === "Archive" ? question.archiveDate !== null :
      self.selectedArchive() === "Not Archived" ? question.archiveDate === null :
      self.selectedArchive() === "All";
  });
});

然后将表格

t正文

绑定到

filteredQuestions

而不是

questions

：

<tbody data-bind="foreach: filteredQuestions">

---

谢谢，我更新了我的代码以反映您的代码，但是仍然有一些问题，只有在我选择“全部”进行存档筛选后，表中才会显示所有结果。它不是按面板过滤，也不是按存档过滤，因为它应该/尝试

question.Panel（）

和

question.ArchiveDate（）

来获取值，因为它们是可观察的。

self.archiveOptions = ko.observableArray(["Archive", "Not Archived", "All"]);
self.selectedArchive = ko.observable(); // Bound to the drop down
self.panelOptions = ko.observableArray(["Panel1", "Panel2"]);
self.selectedPanel = ko.observable(); // Bound to the drop down
self.questions = ko.observableArray([]); // Populated with XHR call
self.filteredQuestions = ko.pureComputed(function() {
  return self.questions().filter(function(question) {
    return question.panel === self.selectedPanel() &&
      self.selectedArchive() === "Archive" ? question.archiveDate !== null :
      self.selectedArchive() === "Not Archived" ? question.archiveDate === null :
      self.selectedArchive() === "All";
  });
});

<tbody data-bind="foreach: filteredQuestions">