KO - select & show

Select an option that represents an object in an observableArray and use its properties.

by ZenMaster

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0rc.js"></script>
<div data-bind="visible: selectedPerson">
        You have chosen a person:
        <span data-bind="text: selectedPerson"></span>.
    </div>
    <select data-bind="options: items, optionsText: 'name', value: person, optionsCaption: 'Select an item...'"></select>

JavaScript

var viewModel = {
    items: ko.observableArray([
        {name: 'John', age: 30},
        {name: 'Lisa', age: 25},
        {name: 'Bob', age: 75}
    ]),
    person: ko.observable({})
};

viewModel.selectedPerson = ko.computed(function() {
    return this.person().name;
}, viewModel);

ko.applyBindings(viewModel);