Set initial dropdown value to viewmodel

I'm having some issues with a dropdown list where I need to pass the initial value to the viewmodel. Just to clarify: I'm working on an edit-form, so the dropdownlist will be populated with an already-selected value.

What I have so far is:

Razor:

<select data-bind="selectedOptions: selectedLength"> 
// razor code omitted 
foreach(var preValue in lengthPreValues) 
{ 
   if(lengthPreValues.Contains(preValue.value)) 
   {开发者_StackOverflow 
      <option selected="selected" value='@preValue'>@preValue</ option> 
   } 
  else 
  { 
     <option value='@preValue'>@preValue</option> 
  } 
} 

And my viewmodel looks like this:

var editOfferViewModel = { 
  // Properties omitted 
  selectedLength: ko.observable("") 
}; 

ko.applyBindings(editOfferViewModel); 

While this definately works when selecting a new value, I'm a bit stuck when it comes to setting the initial value. I was fortunate enough to get some great help from Ryan Niemeyer here on stackoverflow.com with checkboxes and creating custom bindinghandlers, but I'm still having a hard time to figure it out to be honest.

So, any help and/or hint on this is greatly appreciated!

A common and easy way to do this is to serialize your model values to the page. This would be something like:

var viewModel = {
  choices: ko.observableArray(@Html.Raw(Json.Encode(Options))),
  selectedChoices: ko.observableArray(@Html.Raw(Json.Encode(SelectedOptions)))
};

Then, just use a standard data-bind on your select like:

data-bind="options: choices, selectedOptions: selectedChoices"

You then don't even need to populate the option elements in Razor.

If your viewModel is built in an external file, then you can just set the value of the observables in your view (after your external script has been loaded)

My data is something like :

dataList = [ {name:'length1',id:1},{name:'length2',id:2},{name:'length3',id:3},{name:'length4',id:4},{name:'length5',id:5} ]

And I have been using that data with dropdown like this :

<select name="xxx" id="xxxid" data-bind="options: dataList,  value: selectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'"></select>


<select name="xxx2" id="xxxid2" data-bind="options: dataList,  selectedOptions: multiSelectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'" size="5" multiple="true"></select>   

var editOfferViewModel = {
 selectedLength: ko.observable(),
 multiSelectedLength: ko.observableArray()    
};

ko.applyBindings(editOfferViewModel);

$(document).ready(function() {
    // Set initial value
    editOfferViewModel.selectedLength(2);
    // Set inital multi value
    editOfferViewModel.multiSelectedLength(['2','3']);   
});

You can use value property to set initial value.

Here is the working example.