selecting a nested object based on nested dropdowns with knockoutjs

Question

ok so i have the following json:

{"VehicleMakes":
[{"VehicleModels":[],"ID":3,"Description":"BMW"},
{"VehicleModels":[],"ID":1,"Description":"Ford"},
{"VehicleModels":[{"ID":1,"Description":"Astra","MakeID":2},{"ID":2,"Description":"Corsa","MakeID":2}],"ID":2,"Description":"Vauxhall"}],
"VehicleModels":[],
"SelectedMake":"Vauxhall","SelectedModel":null,"Postcode":null}

So basically I have a few vehicle makes and a make can have a number of models.

I then have the following model:

 function SearchModel() {
        this.SearchCriteria = "";
        this.SelectedMake = ko.observable();
        this.SelectedModel = ko.observable();
    }

And then this html:

<select id="vehiclesMake" data-bind="options: SearchCriteria.VehicleMakes, optionsText: 'Description',optionsValue: 'Description', value: SelectedMake, optionsCaption: 'Choose...'"></select>      

 <div data-bind="if: SelectedMake">
            <select data-bind='options: SelectedMake().VehicleModels, optionsText: "Description", optionsCaption: "Select...", optionsValue: "Description", value: SelectedModel'></select>
                 </div>

So I am basically trying to say, when a vehicle make is selected in the first dropdown, display its models in the 2nd dropdown.

The first dropdown populates fine and when I make a selection the 2nd dropdown appears but isn't being populated.

Note I assign all the json to the property SearchCriteria.

What am I doing wrong?

nemesv · Accepted Answer · 2013-01-12 09:55:41Z

1

In your first select with the setting optionsValue: 'Description' you tell knockout to use the Description text as the value in the select. So your SelectedMake will contain the Description text instead of the VehicleMake object.

So just remove the optionsValue and it should work fine:

<select id="vehiclesMake" data-bind="options: SearchCriteria.VehicleMakes, 
                                     optionsText:  'Description', 
                                     value: SelectedMake, 
                                     optionsCaption: 'Choose...'"></select>

Demo JSFiddle.

answered Jan 12, 2013 at 9:55

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

Collectives™ on Stack Overflow

selecting a nested object based on nested dropdowns with knockoutjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related