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.

this should be working fine; check the source of the html generated and see what is being rendered from > selectedSourceMaterialType:ko.observable(@Html.Raw(Json.Encode(Model.SourceMaterialType))) I suspect it's an empty parameter. — neeebzz
– neeebzz, Commented Jul 11, 2011 at 11:02
@nEEbz no, not empty....selectedSourceMaterialType : ko.observable({"Id":2,"Name":"Fruit","Description":"Fresh Fruit","MeasuredIn":1,"MeasuredInValue":1}), is what is rendered, however the initial selection is the the first item in sourceMaterialTypes....which renders as sourceMaterialTypes : ko.observableArray([{"Id":1,"Name":"Coffee Bean","Description":"Raw coffee beans","MeasuredIn":0,"MeasuredInValue":0},{"Id":2,"Name":"Fruit","Description":"‌Fresh Fruit","MeasuredIn":1,"MeasuredInValue":1}]), (the initial selection is "Coffee Bean") — Simon Fox
– Simon Fox, Commented Jul 11, 2011 at 11:18
I guess you need to pass the Id only and not the whole object in the selectedSourceMaterialType observable function -> selectedSourceMaterialType: ko.observable(2) — neeebzz
– neeebzz, Commented Jul 11, 2011 at 11:23
Yes, with optionsValue: 'Id', it would expect that selectedSourceMaterialType is just the Id. — RP Niemeyer
– RP Niemeyer, Commented Jul 11, 2011 at 12:48
@nEEbz ah of course, my bad. If you want to provide that as an answer I will accept and upvote. — Simon Fox
– Simon Fox, Commented Jul 11, 2011 at 19:29

neeebzz · Accepted Answer · 2011-07-12 10:01:17Z

13

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)

answered Jul 12, 2011 at 10:01

neeebzz

11.5k7 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pilavdzice Over a year ago

But does anyone know how to do it if you want to provide the whole object and not use optionsValue:'Id' ?

Straith · Accepted Answer · 2011-07-11 17:05:56Z

5

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>

answered Jul 11, 2011 at 17:05

Straith

831 bronze badge

2 Comments

peteski Over a year ago

I believe the question is more focused on having the initial/default value to be what is set by the model/view model. So if upon editing the item, you'd want the last selected value to be shown, not "Please select..."

Simon_Weaver Over a year ago

Tip: optionsCaption is an observable itself. if it returns null then the item won't be present in the list of options - so you can do this monthCaption = ko.computed(() => this.nextShipmentDate_month() ? null : '-- Select Month --'); (assuming typescript here)

Bryan · Accepted Answer · 2012-08-29 20:32:38Z

2

As @nEEBz suggested, selectedSourceMaterialType is initialized improperly. In the learn.knockoutjs.com "Lists and Collections" tutorial, they initialize their viewmodel's selected-item property by passing the value of a specific index of the observable array. For example, do this:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

...instead of this:

selectedSourceMaterialType: ko.observable({"Id":1,"Name":"Coffee Bean" /* ... */});

That way, the value of the selected item is a reference to the item in the same observable array that the dropdownlist items come from.

answered Aug 29, 2012 at 20:32

Bryan

1,4711 gold badge17 silver badges23 bronze badges

1 Comment

Simon Fox Over a year ago

I don't think they are doing it quite like that? That requires extra processing of the results that have come back from the server to determine the index of the item that needs to be selected, which you don't need to do.

Collectives™ on Stack Overflow

Binding initial/default value of dropdown (select) list

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related