JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.debug.js"></script>
this works with optionsValue: <br/>
<select id="a" class="form-control" data-bind="
        value : TitleId,
        options : _titles,
        optionsText : 'Id',
        optionsValue : 'Id',
        optionsCaption : 'Choose ...'
    "></select><br/><br/>
<div id="b" data-bind="text:ko.toJSON($root)"></div>
<div data-bind="click:function(){ TitleId(3);}">choose miss by id</div>

JavaScript

_titles = ko.observableArray([{Id:1, Value:'Mr'},{Id:2, Value:'Ms'},{Id:3, Value:'Miss'},{Id:4, Value:'Mrs'}]);

function model(){
   var self = this;
   self.Id = ko.observable();
   self.Name = ko.observable();
   self.TitleId = ko.observable();   
    self.Title = ko.computed(function(){
       return ko.utils.arrayFirst(_titles(), function(item) {
             if(item.Id == self.TitleId()) return true;
       });
    });
};
var personModel = new model();

ko.applyBindings(personModel);