KnockoutJs and Dropdownlists Observed Arrays

Question

I am new to KnockoutJs and I am wondering if anyone can help with this.

I have a viewmodel populated from an Mvc3 controller linked to a drop down list and this works fine.

I have additional data stored in the "platform" of the observed array, and I would like this data to be displayed in text boxes, depending on the value selected in the drop-down list.

Here is my code: -

<script type="text/javascript"> $(document).ready(function () { var sampleSubmission = function () { this.selectedPlatform = ko.observable(); this.platforms = ko.observableArray(); this.showSearch = ko.observable(false); this.craftText = ko.observable(); this.showSerialNumber = ko.observable(0); this.selectedPlatform.subscribe(function (platformId) { } .bind(this)); }; var sampleSubmissionViewModel = new sampleSubmission(); ko.applyBindings(sampleSubmissionViewModel); //Load the platforms $.ajax({ url: '@Url.Action("GetPlatforms", "Home")', type: 'GET', success: function (data) { sampleSubmissionViewModel.platforms(data); } }); }); </script> 

Does anyone have any ideas how I achieve this?

Thanks in advance.

Answer 1

You can bind the value of the drop-down list to the selected platform, for example:

 <select data-bind="options: platforms, value: selectedPlatform, optionsText: 'name'"></select> 

I modified your code and made a few assumptions about what you wanted to do, and created a sample. Here is the fiddle: http://jsfiddle.net/johnpapa/DVXH7/