JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<div class="list">
    <select data-bind='options: FirstSelectPersons, optionsText: "fname", optionsCaption: "Select...", value: FirstSelectedPerson'></select>
</div>
<div class="list" data-bind="with:FirstSelectedPerson">
    <select data-bind='options: $parent.SecondSelectPersons, optionsText: "fname", optionsCaption: "Select..."'></select>
</div>

CSS

div.list {
    float:left;
    margin-left:10px;
}

JavaScript

function Person(firstName) {
    this.fname = firstName;
}

function ViewModel() {
    var self = this;
    self.FirstSelectedPerson = ko.observable();
    self.FirstSelectPersons = ko.observableArray([]);
    self.SecondSelectedPerson = ko.observable();
    self.SecondSelectPersons = ko.computed(function () {
        return ko.utils.arrayFilter(self.FirstSelectPersons(),

        function (person) {
            if (self.FirstSelectedPerson()) {                              if(person.fname.indexOf(self.FirstSelectedPerson().fname) < 0) return true;
            }
        });
    });
    
    setTimeout(function(){ self.FirstSelectPersons.push(new Person('Mark');
    self.FirstSelectPersons.push(new Person('Peter');
    self.FirstSelectPersons.push(new Person('Smith')) }, 3000);
    
}
ko.applyBindings(new ViewModel());