Binding initial/default value of dropdown (select) list

Question

I'm having a small issue with setting the initial value of a dropdown. The code below is the view model definition and the initialization in $(document).ready. I have an array called sourceMaterialTypes and a selectedSourceMaterialType representing the selected value of that array. I am initializing the view model with values from the (ASP.Net MVC) Model and ViewBag.

var viewModel = {     sourceMaterialTypes :          ko.observableArray(@Html.Raw(Json.Encode(ViewBag.SourceMaterialTypes))),     selectedSourceMaterialType :         ko.observable(@Html.Raw(Json.Encode(Model.SourceMaterialType))),     ingredientTypes :         ko.observableArray(@Html.Raw(Json.Encode(ViewBag.IngredientTypes))),     selectedIngredientType : ko.observable() };  $(document).ready(function () {      ko.applyBindings(viewModel);      viewModel.selectedSourceMaterialType.subscribe(function(newSourceMaterialType) {         $.getJSON("/IngredientType/FindByMaterialType",                   { "id": newSourceMaterialType })             .success(function (data) {                 viewModel.ingredientTypes($.parseJSON(data));             })             .error(function () { alert("error"); });     }); }); 

The following is the definition of my dropdown (select) list with the Knockout binding definition.

<select id="SourceMaterialTypeId"         name="SourceMaterialTypeId"         data-bind="options: sourceMaterialTypes,                    optionsText: 'Name',                    optionsValue : 'Id',                    value: selectedSourceMaterialType"></select> 

This all works fine except for the initially selected value in the source materials dropdown (selectedSourceMaterialType is bound correctly so when the dropdown selection changes its value is correctly updated, it is only the initial selection I am having a problem with), which is always the first item in the sourceMaterialTypes array on my view model.

I would like the initially selected value to be that which is initialized from the (server-side) model as the value of selectedSourceMaterialType view model property.

Answer 1

I guess you need to pass the Id only and not the whole object in the selectedSourceMaterialType observable function ->

selectedSourceMaterialType: ko.observable(@Model.SourceMaterialType.Id) 

Answer 2

The API has the solution for you, you'll just need to add optionsCaption to your select.

<select id="SourceMaterialTypeId"     name="SourceMaterialTypeId"     data-bind="options: sourceMaterialTypes,                optionsText: 'Name',                optionsValue : 'Id',                value: selectedSourceMaterialType,                optionsCaption: 'Please select...'"></select>