The hospitals
array needs to be an array of objects with two keys, one for the id and another for the hospital's name.
var hospitals = [];
for (var i = 0; i < schedules.length; i++) {
hospitals.push({ name: schedules[i].hospital(), id: schedules[i].hospitalId() });
}
You can then specify the optionsText
and optionsValue
parameters in the data-bind
for the dropdown. Also make sure to change the value
parameter to use the hospitalId
field in your schedule.
<select class="span8" name="hospital"
data-bind="options: $parent.hospitalOptions,
value: hospitalId,
optionsCaption: 'Select Hospital',
optionsText: 'name',
optionsValue: 'id'" data-required="true" data-trigger="change">
</select>
The hospitalId
field is now updating in your model whenever you modify the dropdown, but the hospital
field is not. I recommend turning that into a computed field that grabs the correct hospital name from a lookup based on the hospitalId
value.
JSFiddle: http://jsfiddle.net/5nZRh/17/