JSFiddle - React, Tailwind, and code Playground

HTML

<select data-bind='options: data, optionsText: "name", optionsCaption: "Select an age", value: chosenAge'></select>

JavaScript

ko.extenders.largeNumber = function (target, option) {
     
    var formatter = ko.computed( {
        read: function(){
        var formatted = target().toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return formatted;
    },
        write: function(nv){
            var numeric = nv.replace(/,/g,""); 
            target(numeric);
             
            console.log("View model now contains " + target())
    }
    })
    return formatter;
};


var vm = function () {
    var self = this;
    
    function createExtendedObs(initialValue){
        return ko.observable(initialValue).extend({
        largeNumber: {
            viewModel: self
        }
     });
    }
                                                                                        
    self.chosenAge = ko.observable();
    self.data = ko.observableArray([{
        name: "Bronze",
        population: createExtendedObs(10000)
    }, {
        name: "Modern",
        population: createExtendedObs(6000000000)
    }, {
        name: "Iron",
        population: createExtendedObs(100000)
    }, {
        name: "Jurassic",
        population: createExtendedObs(100)
    }, ]);
  
}

ko.applyBindings(new vm())