with binding not working with default values

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.