KnockoutJS - 选择菜单多个选项答案

【问题标题】：KnockoutJS - Select Menu Multiple OptionsKnockoutJS - 选择菜单多个选项
【发布时间】：2017-06-01 00:26:40
【问题描述】：

我有 2 个选择菜单。一个单选，另一个多选。

当第一个被选中时，它应该会在第二个菜单中自动选择那些相关的选项。

因此，例如，如果选择了“ManualItems”，则应将“Analyst”和“Supervisor”标记为第二个选择菜单。

两个菜单都没有成功绑定，所以我不确定我错过了什么。

<div class="form-group">
    <label for="taskName">Edit Existing Task</label>
    <select class="form-control" id="taskNameSelect"
            data-bind="options: tasks,
                                   optionsText: 'TaskName',
                                   value: currentTask,
                                   optionsCaption: 'Select Task...'"></select>
</div>

<div class="form-group">
  <label for="editApprovalLevelList">Select Approval Levels</label>
  <select multiple="multiple" class="form-control" id="editApprovalLevelList"
          data-bind="options: availableApprovalLevels,
                     selectedOptions: userSelectedApprovalLevels,
                     optionsText: 'ApprovalLevelName',
                     optionsvalue: 'ApprovalLevelName'"></select>
</div>

var viewModel = function(data) {
    var self = this;

    // variables
    self.currentTask = ko.observable();
    self.userSelectedApprovalLevels = ko.observable[];

    self.tasks = ko.observableArray([
    {TaskID: 1, TaskName: "ManualItems", ApprovalLevels:[{"ApprovalID": 1},{"ApprovalID": 2}]},
    {TaskID: 1, TaskName: "Trades", ApprovalLevels:[{"ApprovalID": 2}]},
    {TaskID: 1, TaskName: "Positions", ApprovalLevels:[{"ApprovalID": 1},{"ApprovalID": 3}]},
    ]);

    self.availableApprovalLevels = ko.observableArray([
        {ApprovalID: 1, ApprovalLevelName: "Analyst"},
      {ApprovalID: 2, ApprovalLevelName: "Supervisor"},
      {ApprovalID: 3, ApprovalLevelName: "Manager"}
    ]);

      self.currentTask.subscribe(function (task) {
        var matchingApprovalLevel = ko.utils.arrayFirst(self.availableApprovalLevels(), function (approvalLevel) {
            return approvalLevel.ApprovalID === task.ApprovalID;
        });
        self.userSelectedApprovalLevels(matchingApprovalLevel);
    });      

};

ko.applyBindings(new viewModel());

JSFiddle

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

您的示例中还有许多其他问题，但忽略这些问题，如果您希望多重选择起作用，您应该生成一个选定值数组。您最初是根据任务的ApprovalID 选择批准级别。但任务没有审批 ID，它有一系列审批级别。

self.currentTask.subscribe(function (task) {
    var selected = ko.utils.arrayMap(task.ApprovalLevels, function(a) {
        return ko.utils.arrayFirst(self.availableApprovalLevels(), function (ta) {
            return a.ApprovalID === ta.ApprovalID;
        });
    });
    self.userSelectedApprovalLevels(selected);
});

Updated Fiddle

【讨论】：