KnockoutJS - Wählen Sie Menü Mehrere Optionen

Question

Ich habe 2 Auswahlmenüs. Eins mit einzelner Auswahl, die andere Mehrfachoption auswählen.

Wenn die erste ausgewählt ist, sollte sie automatisch die entsprechenden Optionen im zweiten Menü auswählen.

So zum Beispiel, wenn „ManualItems“ ausgewählt wird, soll es dann markieren „Analyst“ und „Betreuer“, wie in dem zweiten Auswahlmenü ausgewählt.

Kein Menü ist erfolgreich, also bin ich nicht sicher, was ich vermisse.

<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

Es gibt eine Reihe von anderen Fragen in Ihrem Beispiel, aber ignorieren diejenigen, sollten Sie eine Reihe von ausgewählten Werten werden zu erzeugen, wenn Sie die Multiselektion arbeiten möchten. Sie haben ursprünglich Genehmigungsstufen ausgewählt, die auf der der Aufgabe basieren. Eine Aufgabe hat jedoch keine Genehmigungs-ID, sie verfügt über eine Reihe von Genehmigungsstufen.

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