KnockoutJS - 複数のメニューを選択する

Question

私は2つの選択メニューを持っています。 1つはシングル選択、もう1つは複数のオプションを選択します。

最初のものが選択されると、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