Question

使用Knockout v3.4.0和ASP.NET MVC，我想创建一个多选下拉列表，使用第一个下拉列表的选定项填充另一个下拉列表。

This是我到目前为止所提出的......你会发现这种方法存在一些问题：

我选择的医疗条件的.NET视图模型完全由ID组成。但是，我在Knockout中使用完整模型来填充第二个下拉列表。因此，在初始页面加载时不会填充所选值。我可以扩展我的.NET视图模型以包含完整的医疗条件对象，而不仅仅是ID，但将这些信息发回服务器并不合理。在提交时，我需要知道的是列表已选择的ID。
不会填充多选的任何值（因为我使用selectedOptions属性来传递完整模型而不指定optionsValue。因此，在提交表单时返回服务器，所有选定项目的值都为0 ..这显然是不正确的。

如何使用Knockout完成此功能？

Answer 1

看起来你真的想要使用id字段作为值（特别是当它进入服务器时），所以你只需要做一点转换就可以从id中获取整个对象。

映射看起来并没有什么帮助，所以我只是使用原始数据来保持尽可能简单。现在，您选择的ID列表如此表示，并根据它计算所选的医疗条件列表。

  self.availableMedicalConditions = rawConditionData;

  //my .NET view model has a list of IDs, not list of objects which are selected
  self.chosenMedicalConditionIds = ko.observableArray([53, 543, 954]);
  self.chosenMedicalConditions = ko.computed(function() {
    var result = [];
    ko.utils.arrayForEach(self.chosenMedicalConditionIds(), function(id) {
      var conditions = ko.utils.arrayFilter(self.availableMedicalConditions, function(condition) {
        return condition.MedicalConditionId === id;
      });
      if (conditions.length > 0) {
        result.push(conditions[0]);
      }
    });
    return result;
  });

Updated fiddle

在多选下拉列表中根据所选对象填充第二个下拉列表？

1 个答案: