JSFiddle - React, Tailwind, and code Playground

by psteele

HTML

<select
    data-bind="options: years,
        value: year,
        optionsValue: 'id',
        optionsText: 'title'">
</select>

JavaScript

function ViewModel() {
    var self = this;
    
    this.selectedYear = 'id_10';
    this.years = ko.observableArray();
    this.year = ko.computed({
        read: function() {
            return this.selectedYear;
        },
        write: function(value) {
            if( ko.utils.arrayFirst(self.years(), function(y) { return y.id == value;}))
                self.selectedYear = value;
        },
        owner: self
    });
}

var vm = new ViewModel();
ko.applyBindings(vm);
window.setTimeout(
    function() { vm.years([
        {id: 'id_9', title: 'Nine' },
        {id: 'id_10', title: 'Ten'}
    ]); }, 1000);