JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<select id="cboSpecies" data-bind="options: SearchCriteria.Species, optionsText: 'Name', value: Species, optionsCaption: 'Choose...'"></select>
<div data-bind="if: Species">
  <select data-bind='options: Species().System, optionsText: "Name", optionsCaption: "Select...", value: System'></select>
</div>
<div data-bind="if: System">
  <select data-bind='options: System().Syndrome, optionsText: "Name", optionsCaption: "Select...", value: Syndrome'></select>
</div>
<div data-bind="if: Syndrome">
  <select data-bind='options: Syndrome().Diagnosis, optionsText: "Name", optionsCaption: "Select...", optionsValue: "Name", value: $parent.Diagnosis'></select>
</div>
<hr>

<pre data-bind="text: ko.toJSON($data, null, 4)"></pre>

JavaScript

var json = {
  "Species": [{
    "ID": 3,
    "Name": "Feline",
    "System": []
  }, {
    "ID": 1,
    "Name": "Ovine",     
    "System": []
  }, {
    "ID": 2,
    "Name": "Canine",
    "System": [{
      "ID": 1,
      "Name": "Cardiovascular System",
      "Syndrome": [{
          "ID": 1,
          "Name":"Blood",
          "Diagnosis":[
              {
                  "ID":"1",
               "Name": "Diag 1"},
              {
                  "ID":"1",
               "Name": "Diag 2"
                  }]
              },
                   {
          "ID": 2,
          "Name": "Heart/Aorta",
          "Diagnosis":[{
                  "ID":"1","Name": "Diag 3"}          
          ]}]
    },{
      "ID": 1,
      "Name": "GI System /Abdomen",
      "Syndrome": [
            {
          "ID": 1,
          "Name":"Abdomen",
          "Diagnosis":[]
            },
           {
          "ID": 2,
          "Name":"Abomasum",
          "Diagnosis":[]
          }]
    }]
  }]  
};

function SearchModel() {
    ko.extenders.consoleMe = function(target, option) {
    target.subscribe(function(newValue) {
       console.log('Value changed - ', target());
    });
    return target;
};
  this.SearchCriteria = "";
    this.Species = ko.observable().extend({consoleMe: true});
  this.System = ko.observable().extend({consoleMe: true});
  this.Syndrome = ko.observable().extend({consoleMe: true});
  this.Diagnosis = ko.observable().extend({consoleMe: true});
}

var model = new SearchModel();
model.SearchCriteria = json;

ko.applyBindings(model);