JSFiddle - React, Tailwind, and code Playground

by badsyntax

HTML

<select data-bind="options: status">

JavaScript

var ViewModel = function() {
    
    this.editStatusCanShowActive = ko.observable(true);
    this.editStatusCanShowInactive = ko.observable(false);
    this.editStatusCanShowHold = ko.observable(true);
    this.editStatusCanShowLocked = ko.observable(false);
    
    this.status = ko.computed(function() {
        var options = [];
        if (this.editStatusCanShowActive()) {
            options.push('Active');
        }
        if (this.editStatusCanShowInactive()) {
            options.push('Inactive');
        }
        if (this.editStatusCanShowHold()) {
            options.push('Hold');
        }
        if (this.editStatusCanShowLocked()) {
            options.push('Locked');
        }
        return options;
    }, this);
};
 
var vm = new ViewModel();

ko.applyBindings(vm);