KnockoutJS-使用选择2的多重选择仅显示第一个选择

Question

我正在尝试将2个多选框与Knockout JS配合使用。
该框显示国家列表，用户可以选择多个国家。
该框正确显示了多个国家，但是，可观察的数组仅显示了第一个条目。
我的目的是让所有选定的国家（而不是第一个）进入。
起初我以为我不能使用带淘汰赛的选择2多重选择，但是如果我添加两个，例如（MT，NL），则可观察到的显示MT，但是如果我删除MT，它将更新为NL（所以我不认为这就是问题）

逻辑如下：

// Class to represent a row in the dpos grid
function DpoItem(address, preferredLanguage, countries)
{
    var self = this;
    self.address = address;
    self.preferredLanguage = preferredLanguage;
    self.countries = ko.observableArray(countries);
}

// Class to represent a language
function LanguageItem(code, name)
{
    var self = this;
    self.code = code;
    self.name = name;
}

// Class to represent a country
function CountryItem(code, name)
{
    var self = this;
    self.code = code;
    self.name = name;
}


// Overall viewmodel for this screen, along with initial state
function DposViewModel()
{
    var self = this;

    // Populate countries
    var countriesObject = JSON.parse(countriesJSON);
    var countries = [];
    for (var cKey in countriesObject)
    {
        countries.push(new CountryItem(cKey, countriesObject[cKey]));
    }
    self.countriesList = ko.observableArray(countries);

    // Populate languages
    var languagesObject = JSON.parse(languagesJSON);
    var languages = [];
    for (var lKey in languagesObject)
    {
        languages.push(new LanguageItem(lKey, languagesObject[lKey]));
    }
    self.languagesList = ko.observableArray(languages);

    // parse JSON DTOs and put them in the viewmodel
    var dposObject = JSON.parse('[{"countries":[],"type":"dpo","address":"dpo @avis.com","preferredLanguage":"en - GB"},{"countries":["GB", "MT"],"type":"dpo","address":"dpo @avis.co.uk","preferredLanguage":"en - GB"},{"countries":["MT"],"type":"dpo","address":"dpo @avis.com.mt","preferredLanguage":"mt - MT"}]');
    var dpos = [];
    dposObject.forEach(dpo =>
    {
        dpos.push(new DpoItem(dpo.address, dpo.preferredLanguage, dpo.countries));
    });
    self.dpos = ko.observableArray(dpos);

    self.addDpo = function ()
    {
        self.dpos.push(new DpoItem("", "", ""));
    };

    self.removeDpo = function ()
    {
        self.dpos.remove(this);
    };

    self.checkDpos = function ()
    {
        for (i = 0; i < self.dpos().length; i++)
        {
            var dpo = self.dpos()[i];
            var dpoCountries = dpo.countries();
        }
    };
}

ko.applyBindings(new DposViewModel());


$(document).ready(function ()
{
    $('.js-example-basic-multiple').select2();
});

下面的用户界面

<div id="table" class="table-editable">
    <table class="table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Preferred Language</th>
                <th>Countries</th>
                <th><span id="table-add" class="table-add glyphicon glyphicon-plus" data-bind="click: addDpo"></span></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: dpos">
            <tr>
                <td contenteditable="true" data-bind="text: $data.address"></td>
                <td>
                    <select class="js-example-basic-single" data-bind="options: $parent.languagesList,  optionsText: 'name', optionsValue: 'code', value: $data.preferredLanguage"></select>
                </td>
                <td>
                    <select class="js-example-basic-multiple" multiple="multiple" data-bind="options: $parent.countriesList,  optionsText: 'name', optionsValue: 'code', value: $data.countries"></select>
                </td>
                <td>
                    <span class="table-remove glyphicon glyphicon-remove" data-bind="click: $parent.removeDpo"></span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<button data-bind="click: checkDpos">Click me</button>


<div>
    <h1>Summary</h1>
    <div data-bind="foreach: dpos">
        <p>Address: <strong data-bind="text: address"></strong></p>
        <p>Preferred Language: <strong data-bind="text: preferredLanguage"></strong></p>
        <p>Countries: <strong data-bind="text: countries"></strong></p>
    </div>
</div>

为什么会发生这种情况？