Question

我有一个多选组件，我已经选择了＆＃39;选项＆＃39;绑定，＆＃39;选项＆＃39;根据我在另一个多选组件中选择的值进行刷新。下面是第一个多选组件

<select data-bind="multiple: true, required: true, options:repositoriesForSelect, value: selectedRepository"></select>

根据在此组件中选择的值，刷新第二个组件的选项

<select data-bind=" multiple: true,required: true,options: branchesForSelect,value: selectedBranch"></select>

使用计算变量刷新第二个选项：

 branchesForSelect = ko.computed(function(){
   //selectedRepository is an observable array here
  //some logic

 });

哪个工作正常，但除了上述内容之外，我还想刷新分支，选择＆＃39;基于在同一组件中选择的值。意思是，如果分支选择＆＃39;包含值＆＃39; A＆＃39;，＆＃39; B＆＃39;，＆＃39; C＆＃39;，然后选择＆＃39; A＆＃39;，我想刷新＆＃39; branchesForSelect＆＃39;仅显示＆＃39; C＆＃39;在选项列表中。

有人可以指导我吗？如果问题不清楚，请在评论中告诉我。

由于

Answer 1

通过计算第二个选项列表，您可以走上正轨。这是您仍然需要做的事情：在计算内部，使用selectedRepository的值返回链接到选择的选项数组。通过使用此值，knockout将确保在第一个选择的value变量更改后，重新评估第二个选项列表。

在评论中澄清问题后：

从用户体验的角度来看，在用户输入后改变选择本身的值是一个坏主意（如果你问我），但肯定可以做到。下面的代码将向您展示如何。当多选的第一个选项处于活动状态时，其他选项将被隐藏。

以下是一个例子：

＆＃13;

var repositoryBranches = {
  a: ["All", 1, 2, 3, 4, 5, 6],
  b: ["All", 0, 7, 8],
  c: ["All", 9, 10]
};

var VM = function() {
  var self = this;
  
  this.repositoryKeys = ["a", "b", "c"];
  this.selectedRepository = ko.observable("a");
  
  this.selectedBranches = ko.observableArray([]);
  this.branchesForSelectedRepository = ko.computed(function() {
    var allBranchesForRepo = repositoryBranches[self.selectedRepository()];
    // We're making an exception if the first one is selected:
    // don't show any other options if the selected one is the first one
    if (self.selectedBranches()[0] === allBranchesForRepo[0]) {
      return ["All"];
    }
  
    return allBranchesForRepo;
  });
 
  // Clear selection when changing repository
  this.selectedRepository.subscribe(function clearSelection() {
    self.selectedBranches([]);
  });
};

ko.applyBindings(new VM());

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options:repositoryKeys, value: selectedRepository">  </select>
<select multiple="true" data-bind="options:branchesForSelectedRepository, selectedOptions: selectedBranches"></select>

＆＃13;

（fiddle）

如果您需要帮助找到一个很好的方式链接＆＃34;分支＆＃34;请告诉我。 to＆＃34; repositories＆＃34;。理想情况下，＆＃34;存储库＆＃34;拥有自己的模型，包含一系列＆＃34;分支＆＃34;。然后，您可以将计算出的数组定义为return self.firstSelection().branches;

如何刷新＆＃39;选项＆＃39;在ko多选组件中绑定？

1 个答案: