KnockoutJS - 选择菜单多个选项

Question

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

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

因此，举例来说，如果“ManualItems”时，它应该然后标记“分析师”和“主管”作为第二选择菜单中选择。

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

<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

Answer 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