selecting items from dropdown menu

Question

In this fiddle and in the view appointments tab there is a add timing button.When clicked on the same button ,a new rows gets inserted.I have a button save in the profile tab and on click it prints JSON value on the console.

My problem

Suppose I have clicked 2 times add timing button button and hence 2 new rows are inserted.Now I from the week day menu I have selected some day,entered totime and from time and selected hospital from the dropdown.Now when I click the save button(in the profiles tab) I want the JSOn but in my case hospitalID remain blank.So now I made variable and assigned 5 to it as shown in this fiddle

But now I can not make hospitalID=5 hardcoded because for now there is one hospital but in future I can add few more hospitals so based on the selected hospital from the drop down,I want the hospitalID

Answer 1

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/