JSFiddle - React, Tailwind, and code Playground

by CyberLight

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div>
<select data-bind="options: orgTypes, optionsText: 'name', optionsValue: 'id', value: selectedOrgTypeId">
</select>
<span data-bind="text: selectedOrgType().name"></span>
</div>
<div>
<select data-bind="options: selectedOrgType().subTypes, optionsText: 'name', optionsValue: 'id', value: selectedOrgSubTypeId"></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')])]),
            
            selectedOrgTypeId = ko.observable(1),
            selectedOrgType = ko.computed(function(){
               var otList = orgTypes(),
                   selId = selectedOrgTypeId();
                for(var i =0; i<otList.length; i++){
                    if(otList[i].id()==selId)
                        return otList[i];
                }
                return null;                   
            }),
            
            selectedOrgSubTypeId = ko.observable(1),
            selectedOrgSubType = function(){
               var otList = selectedOrgType().subTypes(),
                   selId = selectedOrgSubTypeId();
                for(var i =0; i<otList.length; i++){
                    if(otList[i].id()==selId)
                        return otList[i];
                }
                return null;                   
            };                           

        return {
            orgTypes  : orgTypes,
            selectedOrgTypeId : selectedOrgTypeId,
            selectedOrgType  : selectedOrgType,
            selectedOrgSubTypeId  : selectedOrgSubTypeId,
            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,
           ...