JSFiddle - React, Tailwind, and code Playground
HTML
<p>
Select a car:
<select data-bind="options: cars, value: selectedCar, optionsText: 'name'"></select>
</p>
<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>
JavaScript
var viewModel = {};
viewModel.cars = [{ id: 'volvo', name: 'Volvo' }, { id: 'saab', name: 'Saab' }, { id: 'mercedes', name: 'Mercedes' }, { id: 'audi', name: 'Audi' }];
viewModel.selectedCar = ko.observable();
viewModel.selectedValue = ko.computed(function () {
return viewModel.selectedCar() && viewModel.selectedCar().id;
});
viewModel.selectedText = ko.computed(function () {
return viewModel.selectedCar() && viewModel.selectedCar().name;
});
ko.applyBindings(viewModel);