JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<label for="cats">Categories</label>
<select id="cats" data-bind="options: availableCats, optionsText: 'name', value: selectedCat, event: {change: populateItems}" class="xform-control"></select>
<label for="items">Items</label>
<select id="items" data-bind="options: availableItems, optionsText: 'name', value: selectedItem" class="xform-control"></select>

JavaScript

$(document).ready(function () {
    var BaseVM = function () {
        var that = {};
        return that;
    };

    var TestVM = function () {
        var that = BaseVM();

        that.availableCats = ko.observableArray([{
            name: '--'
        }, {
            name: 'pork'
        }, {
            name: 'ham'
        }]);
        that.selectedCat = ko.observable(null);
        that.availableItems = ko.observableArray([]);
        that.selectedItem = ko.observable(null);

        that.populateItems = function () {
            that.availableItems([]);

            if (that.selectedCat().name === 'pork') {
                that.availableItems([{
                    name: 'chop'
                }]);
            } else if (that.selectedCat().name === 'ham') {
                that.availableItems([{
                    name: 'spam'
                }]);
            }
        };

        return that;
    };

    var vm = TestVM();
    ko.applyBindings(vm);
});