JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<div>
    <select data-bind="options: slots, optionsText: 'Text', value: 'Value', value: SlotPosition, optionsAfterRender: setOptionAttribute"> </select>
</div>

JavaScript

var slots = [        
    { Text: "1", Value: "1"},
    { Text: "2", Value: "2"},
    { Text: "3", Value: "3"}
];

var ViewModel = function () {
    var self = this;
    
    self.availableSlots = ko.observableArray(slots);   
    self.Id = '999';
    self.SlotPosition = ko.observable(1);    
    self.Preset = self.SlotPosition.peek();
    
     self.SlotPosition.subscribe(function(newVal){
         if(newVal == self.Preset) return false;
         var newVal = self.SlotPosition(); 
         alert('newVal: ' + newVal);
         alert('oldVal: ' + self.Preset);
         // Then, I find my other dropdown from the next model 
         // using the newVal, and set it to oldVal
         // After doing you work set the newVal to self.Preset
         self.Preset=newVal; 
    });
    self.setOptionAttribute = function(option, item) {

        /*if (item.color)
            option.style.color = item.color;
        if (item.title)
            option.title = item.title;*/
              option.title = item.Value
        ko.applyBindingsToNode(option, item);
    };
   
};
ko.applyBindings( new ViewModel() );