JSFiddle - React, Tailwind, and code Playground

HTML

<select id="make" class="form-control select pull-left" data-bind="options: makes, selectedIndex: selectedMake, optionsText : 'name'"></select>
<select id="type" class="form-control select pull-left" data-bind="options: carTypes, selectedIndex: selectedType, optionsText : 'name'"></select>

JavaScript

ko.bindingHandlers.selectedIndex = {
    init: function(element, valueAccessor) {
        ko.utils.registerEventHandler(element, "change", function() {
             var value = valueAccessor();
            console.debug(value);
            if (ko.isWriteableObservable(value)) {
               value(element.selectedIndex);   
            }
        });
    }
};

	var viewModel = function(){
		var self = this;
		self.selectedMake = ko.observable();
		self.selectedType = ko.observable();

		self.makes = [
				{id:1, name: 'Dodge'},
				{id:2, name: 'BMW'}
		];
		self.types = [
				{id: 1, make:1, name:'neon'},
				{id: 2, make:2, name:'328i'}
		];
		self.carTypes = ko.computed(function(){
            var carTypes = [];
            
            if (self.selectedMake() < self.types.length) {
                carTypes.push(self.types[self.selectedMake()])
            }
            
            return carTypes;
		});
	};
	var model = new viewModel();
	ko.applyBindings(model);