KnockoutJS - настройка меню выбора на основе выбора в другом меню

var viewModel = function(data) {
  var self = this;
  
  var current = ko.observable(null);
  var parent = ko.observable(null);
  
  self.tasks = ko.observableArray(tasks());
  self.parentTasks = ko.observableArray(parentTasks());

  self.currentTask = ko.computed({
    read: current,
    write: function(task) {
      if (task && task.ParentID) {
        // Find parent task with right ID
        var curParent = self.parentTasks()
          .find(function(parent) {
            return parent.TaskID === task.ParentID;
          });
          
        // If it there, write to parent selection
        if (curParent) {
          parent(curParent);
        }
      }
      
      current(task);
    }
  });
  
  self.parentTask = ko.computed({
    read: parent,
    write: function(task) {
      /* To be filled in by the question asker */
      parent(task);
    }
  });
  

  // This can be automated via a 'computed':
  self.taskDescription = ko.pureComputed(function() {
    var current = self.currentTask();
    var parent = self.parentTask();
    
    return (current ? current.TaskDescription : "no existing task") +
      " - (" +
      (parent ? parent.TaskDescription : "no parent task") +
      ")";
  });
};

ko.applyBindings(new viewModel());



function tasks() {
  return [
    {TaskID: 1, TaskName: "ManualItems", TaskDescription: "Manual Rec", ParentID: 4, ParentName: "Positions"},
    {TaskID: 2, TaskName: "Trades", TaskDescription: "Trades Data", ParentID: null, ParentName: null},
    {TaskID: 3, TaskName: "File-In", TaskDescription: "File Detail", ParentID: 2, ParentName: "Trades"},
    {TaskID: 4, TaskName: "Positions", TaskDescription: "Positions Overview", ParentID: null, ParentName: null}
  ];
};

function parentTasks() {
  return [
    {TaskID: 1, TaskName: "ManualItems", TaskDescription: "Manual Rec", ParentID: 4, ParentName: "Positions"},
    {TaskID: 2, TaskName: "Trades", TaskDescription: "Trades Data", ParentID: null, ParentName: null},
    {TaskID: 3, TaskName: "File-In", TaskDescription: "File Detail", ParentID: 2, ParentName: "Trades"},
    {TaskID: 4, TaskName: "Positions", TaskDescription: "Positions Overview", ParentID: null, ParentName: null}
  ];
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<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="taskParent">Select Parent Task</label>
    <select class="form-control" id="taskParent"
            data-bind="options: parentTasks,
                                optionsText: 'TaskName',
                                value: parentTask,
                                optionsCaption: 'Select Parent Task...'"></select>
</div>

<div class="form-group">
    <label for="taskDescription">Task Description</label>
    <p class="form-control" data-bind="text: taskDescription"></p>
</div>