with binding not working with default values - knockout-2.0

Question

I have the following scanrio.
The child object defination
function SearchFilterOption(data){
var self = this
self.FilterCheck = ko.observable(false)
self.List = ko.observableArray([])
self.SelectedOptions = ko.observableArray([])
self.FilterText = ko.computed(function(){
var selectedDescriptions = [];
ko.utils.arrayForEach(self.List(), function (item) {
if (in_array(item.Value, self.SelectedOptions()))
selectedDescriptions.push(item.Description)
})
return selectedDescriptions.join(',')
})
self.FilterLabel = ko.computed(function(){
return (self.SelectedOptions() && self.SelectedOptions().length > 0) ? 'selected_filter' : ''
})
self.FilterClass = ko.computed(function(){
self.List(data)
return ( self.FilterCheck() == true ) ? 'set_check':'un_check'
})
self.Toggle = function(){
self.FilterCheck(!self.FilterCheck())
}
}
The parent model
var page = function() {
var self = this
self.LookupData = ko.observableArray()
self.Countries = ko.observableArray([])
self.LoadData = function(){
self.GetProfileData()
self.GetPreviousSearch()
}
self.GetProfileData = function(){
var url = 'ProfileApi/Index'
var type = 'GET'
var data = null
ajax(url , data , self.OnGetProfileDataComplete , type)
}
self.OnGetProfileDataComplete = function(data){
self.LookupData(getLookupData())
self.Countries(new SearchFilterOption(self.LookupData().Countries))
}
self.GetPreviousSearch = function(){
var url = 'SearchApi/PreviousSearch'
var type = 'GET'
var data = null
ajax(url , data , self.OnGetPreviousSearchComplete , type)
}
self.OnGetPreviousSearchComplete = function(data){
var search = data.Payload
if(search.locationCountryList){self.Countries().SelectedOptions(self.MakeInt(search.locationCountryList))}
}
self.MakeInt = function(array){
return array.map(function(item) {
return parseInt(item, 10);
})
}
self.LoadData()
}
And binding
$('document').ready(function () {
ko.applyBindings(new page())
})
<div data-bind="with:Countries">
<ul class="srh_fltr">
<li>
<label class="" data-bind="css:FilterLabel">Countries</label>
<p data-bind="text:FilterText"></p>
<div class="check_box">
<a class="un_check active" data-bind="css:FilterClass,click:Toggle">
<img src="../images/spacer.gif">
</a>
</div>
</li>
</ul>
<section class="form_view" data-bind="visible:FilterCheck">
<select multiple="multiple" data-bind="
options:List,
optionsText:"Description",
optionsValue:"Value",
optionsCaption:"--- ",
value:0,
selectedOptions:SelectedOptions"></select>
</section>
</div>
Here is some lookup data sample
[{
"Value": 1,
"Description": "United States"
}, {
"Value": 2,
"Description": "Canada"
}, {
"Value": 3,
"Description": "United Kingdom"
}, {
"Value": 4,
"Description": "Pakistan"
}, {
"Value": 5,
"Description": "India"
}, {
"Value": 6,
"Description": "Saudi Arabia"
}, {
"Value": 7,
"Description": "U.A.E."
}, {
"Value": 8,
"Description": "Afghanistan"
}, {
"Value": 9,
"Description": "Albania"
}]
OK. Code is complete. The problem is that when GetPreviousSearch is called and self.Countries().SelectedOptions() is filled nothing is selected. I mean FilterText is not displayed. i have seen in console the object contains the data filled by GetPreviousSearch but ui does not get changed? How can i resolve this issue. I suspect with biding may have to do something with it.
Here is the fiddle.

Answer 1

I have resolved the issue the problem is here
<select multiple="multiple" data-bind="
options:List,
optionsText:"Description",
optionsValue:"Value",
optionsCaption:"--- ",
value:0,
selectedOptions:SelectedOptions"></select>
</section>
In this i have to remove value attribute for multiselect. I found that value produces problem if used with selectedOptions in multiselect. Although if selectedOptions is used with dropdown it does not make any problem.