javascript - Setting the initial value in a Knockout select -

i'm having problems getting initial value of select equal value in knockout model.

http://jsfiddle.net/npearson99/bjwat/2/

in fiddle, group should "group 2", it's not selecting group.

if change value: 'selectedgroupid' value: 2, works.

<div data-bind="with: selectedworkout">  <h3>current workout</h3> workout id: <label data-bind="text: id"></label> <br/>workout name: <label data-bind="text: name"></label> <br/>group: <select data-bind="options: $root.grouplist,                            optionstext: 'groupname',                           optionsvalue: 'id',                           optionscaption: 'no group',                           value: 'selectedgroupid'"></select> 

function group(id, groupname) {     var self = this;      self.id = id;     self.groupname = groupname; }  function workout(id, name, selectedgroupid) {     var self = this;     self.id = id;     self.name = name     self.selectedgroupid = ko.observable(selectedgroupid); }  function viewmodel() {     var self = this;      self.grouplist = ko.observablearray([     new group(1, 'group one'),     new group(2, 'group two'),     new group(3, 'group three')]);      self.selectedworkout = ko.observable(new workout(4, 'test workout', 2)); }  ko.applybindings(new viewmodel()); 

the value binding takes reference property parameter , not string (so not property name optionsvalue or optionsvalue).

so correct usage is:

<select data-bind="options: $root.grouplist,                        optionstext: 'groupname',                       optionsvalue: 'id',                       optionscaption: 'no group',                       value: selectedgroupid"></select> 

demo jsfiddle.