JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div>
<label>Organization type:</label>
<select data-bind="options: orgTypes, optionsText: 'name', value: selectedOrgType">
</select>
<span data-bind="text: selectedOrgType().name"></span>
</div>
<div>
<label>Organization sub type:</label>
<select data-bind="options: selectedOrgType().subTypes, optionsText: 'name', value: selectedOrgSubType"></select>
<span data-bind="text: selectedOrgSubType().name"></span>
</div>

JavaScript

$(function(){
    function OrgTypesModel(){
        var orgTypes = ko.observableArray([
            new OrgType(1,'tp1',
                        [new OrgSubType(1,'subT1'), 
                         new OrgSubType(2,'subT2'), 
                         new OrgSubType(3,'subT3')]),
            
            new OrgType(2,'tp2',
                        [new OrgSubType(4,'subT4'), 
                         new OrgSubType(5,'subT5'), 
                         new OrgSubType(6,'subT6'),
                         new OrgSubType(7,'subT7')])]),
            
           selectedOrgType = ko.observable(orgTypes()[0]),
             

           selectedOrgSubType =  ko.observable(orgTypes()[0].subTypes()[0]);
        
        return {
            orgTypes  : orgTypes,
            selectedOrgType  : selectedOrgType,
            selectedOrgSubType : selectedOrgSubType
        };            
    }
            
    function OrgType(idv, namev, subTypesv){
        var id = ko.observable(idv),
            name = ko.observable(namev),
            subTypes = ko.observableArray(subTypesv);
        return {
            id : id,
            name : name,
            subTypes : subTypes
        };
    }
    
    function OrgSubType(idv, namev){
        var id = ko.observable(idv),
            name = ko.observable(namev);
        return {
            id : id,
            name : name            
        };         
    }
    
    ko.applyBindings(new OrgTypesModel());
});