JSFiddle - React, Tailwind, and code Playground
HTML
<input data-bind="value: animalType" type="text" />
<select data-bind="options: animalsForType, value: selectedAnimal, optionsValue: 'ID', optionsText: 'Name'"></select>
JavaScript
var self = {};
self.animalType = ko.observable();
self.selectedAnimal = ko.observable();
self.animalsForType = ko.computed(function () {
var selectedType = self.animalType();
var animals = [{"Name": "Cat","ID": "1"},
{"Name": "Lion","ID": "2"},
{"Name": "Cat","ID": "1"},
{"Name": "Tiger","ID": "2"}];
return !selectedType ? [] : animals.filter(function (animal) {
return animal.ID == selectedType;
});
});
ko.applyBindings(self);