JSFiddle - React, Tailwind, and code Playground

by wwwroot

HTML

<button data-bind="click: populatePriceList">Populate Price List</button>
<br />
<p data-bind="text: defaultPrice"></p>
<select data-bind="options: priceList, optionsText: 'NetPrice', value: selectedPrice()"></select>

JavaScript

function vm() {
    var self = this;

    self.priceList = ko.observableArray();
    self.selectedPrice = ko.observable();
    self.defaultPrice = ko.observable();

    self.populatePriceList = function () {
        self.priceList([{
            Id: 1,
            NetPrice: 123,
            IsDefault: false
        }, {
            Id: 2,
            NetPrice: 123.99,
            IsDefault: true
        }, {
            Id: 3,
            NetPrice: 199.99,
            IsDefault: false
        }]);
        
        ko.utils.arrayForEach(self.priceList(), function (price) {
            if (price.IsDefault === true) {
                self.defaultPrice(price.NetPrice);
                self.selectedPrice(price);
            }
        })
    };
}

ko.applyBindings(new vm());