JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <select data-bind="options: categories, optionsText: 'name', optionsCaption: 'Select', value: selected_category"></select>
</div>  
<!-- ko with:selected_category -->
    <!-- ko if: subcategories.length > 0 -->
<div class="mydiv">    
    <select data-bind="options: subcategories, optionsText: 'name', optionsCaption: 'Select', value: $parent.selected_sub_category"></select>    
    Some Text
</div> 
<!-- /ko -->
<!-- /ko -->

CSS

.mydiv {
    background: yellow
}

JavaScript

var ViewModel = function(){
    var self = this;
self.categories = ko.observableArray([
            {"name": "top 1", "subcategories":[
                                              {"name": "sub 1"},
                                              {"name": "sub 2"}
                                              ]},
    {"name": "top 2", "subcategories":[]}
    ]);

    self.selected_category = ko.observable();
    self.selected_sub_category = ko.observable();
}
ko.applyBindings(new ViewModel());