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

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

ko.applyBindings(editOfferViewModel);

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

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

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

<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']);
});