JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<section id="page">
    <select data-bind="serverCombo: { value: facilityId }">
        <option value="1">The Deck</option>
        <option value="2">The Pool</option>
        <option value="3">The Shagpile Carpet and Mirrored Ceiling room</option>
    </select>
    
    <div>Current value: <span data-bind="text: facilityId"></span></div>
</section>

JavaScript

$(function() {
    ko.bindingHandlers["serverCombo"] = {
        init: function (element, valueAccessor) {
            var $element = $(element);
            
            var options = ko.unwrap(valueAccessor());
            var observableTarget = options.value;
            
            $element.change(function onElementChanged() {
                var newValue = $element.val();
                observableTarget(newValue);                
            });
        },
        
        update: function (element, valueAccessor) {
            var $element = $(element);

            var options = ko.unwrap(valueAccessor());
            var observableTarget = options.value;

            $element.val(observableTarget());
        }
    }
    
    var viewModel = {
        facilityId: ko.observable(1)
    };
    
    ko.applyBindings(viewModel, document.getElementById("page"));
});