JSFiddle - React, Tailwind, and code Playground

by namlth

HTML

<select id="customerSelect" 
             data-bind="options: allCustomers,
            optionsText: 'customerName', 
            value:   selectedCustomer,
optionsAfterRender: setOptionStyling"" />

CSS

.expired {
text-decoration: line-through;
color: red;
}

JavaScript

var Customer = function (id, name, expired) {
       this.id = id;
       this.customerName = name;
       //this.expiryDate = expiryDate;
       this.hasExpired = function () {
           return expired;
       };
   };

   function ViewModel() {
       var self = this;
       self.customerRegion = ko.observable();
       self.customerName = ko.observable();

       self.allCustomers = [new Customer(1, "User1", false), new Customer(2, "User2", true), new Customer(3, "User3", false)]
       self.selectedCustomer = ko.observable()

       self.setOptionStyling = function (option, item) {
           console.log(item.hasExpired())
           ko.applyBindingsToNode(option, {
               css: {
                   expired: item.hasExpired()
               }
           }, item);
       }
   }
   ko.applyBindings(new ViewModel())