JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<select data-bind="options: mappedListItems, 
                   optionsText: 'name',                   
                   value: mappedSavedRecord.gender"></select>
<p>mappedSavedRecord.gender.id = <span data-bind="text: mappedSavedRecord.gender.id"></span>
</p>
<p>mappedSavedRecord.gender.name = <span data-bind="text: mappedSavedRecord.gender.name"></span>
</p>

JavaScript

var listItems = '[{"id": "1","name": "male"},{"id": "2","name": "female"}]';
var savedRecord = '{"gender": {"id": "2","name": "female"}}';

ViewModel = function () {
    mappedListItems = ko.mapping.fromJSON(listItems);
    mappedSavedRecord = ko.mapping.fromJSON(savedRecord);
}

ko.applyBindings(new ViewModel());