JSFiddle - React, Tailwind, and code Playground

HTML

<div style="color:hotpink">with value = id
    <select data-bind="
    options:availableStates, 
    optionsText:'name', 
    optionsValue:'id', 
    value:selectedStateId"></select>
</div>
<p style="color:hotpink">selected id is:<strong data-bind="text:selectedStateId"></strong>
</p>
<div style="color:purple">with value = attr.color
    <select data-bind="
    options:availableStates, 
    optionsText:'name', 
    optionsValue:'attr.color', 
    value:selectedStateColor"></select>
</div>
<p style="color:purple">selected color is:<strong data-bind="text:selectedStateColor"></strong>
</p>

CSS

p {
    padding:20px;
    font-size:20px;
    border:1px solid black
}

JavaScript

var SweetViewModel = function () {
    var self = this;
    self.selectedStateId = ko.observable();
    self.selectedStateColor = ko.observable();
    self.availableStates = ko.observableArray([{
        id: 1,
        name: "Wisconsin",
        attr: {
            color: "red"
        }
    }, {
        id: 2,
        name: "California",
        attr: {
            color: "white"
        }
    }, {
        id: 3,
        name: "Arizona",
        attr: {
            color: "blue"
        }
    }]);
};

ko.applyBindings(new SweetViewModel());