JSFiddle - React, Tailwind, and code Playground

by bikeshedder

HTML

<p><a href="#" data-bind="click: rebuildChoices">rebuild choices</a></p>

<hr>

<select data-bind="options: choices, optionsText: 'label', optionsValue: 'value', value: value"></select>
<p>Value: <span data-bind="text: value"></span></p>

<hr>
    
<select data-bind="options: choices, optionsText: 'label', optionsValue: 'value', selectedOptions: multiValue"
    multiple="true"></select>
<p>Value: <span data-bind="text: multiValue"></span></p>

JavaScript

function Model() {
    this.choices = ko.observableArray();
    this.value = ko.observable(true);
    this.multiValue = ko.observableArray();
    this.rebuildChoices();
}

Model.prototype.rebuildChoices = function() {
    this.choices([
        {label: 'Yes', value: true},
        {label: 'No', value: false},
        {label: 'Default (true)', value: true}
    ]);
}

var model = new Model();

ko.applyBindings(model);