Javascript 将select2.js与多个select optgroup和knockoutJS一起使用

我正在尝试使用knockoutJS通过optgroup实现多选择的数据绑定。此外，我们希望使用select2的搜索和显示功能

当使用html控件直接添加项目时，一切都很好。您可以选择上面示例中的一些国家，然后单击“查看”按钮以查看这些国家的代码是否被很好地检索到。但是，我想用另一种方式填充这些项。确切地说，我创建了一个命令来刷新包含所选项目的可观察数组，并强制选择可用选项列表中的第一个项目（在我们的示例中是老挝）。单击第二个按钮时执行此命令

单击后一个按钮后，您可以通过单击第一个按钮检查可观察的selectedCountries是否包含预期值。不幸的是，UI控件没有刷新，你知道怎么做吗？我的视图的html数据库如下所示

<select class="multi-select" data-bind="foreach: availableCountries,selectedOptions:selectedCountries" multiple="multiple">
    <optgroup data-bind="attr: {label: label}, foreach: children">
        <option data-bind="text: display, value: code"></option>
    </optgroup>
</select>

---

简而言之，Select2不知道您对基础模型所做的更改

我可以使用hack使您的示例正常工作，请参见此处：

所作的修改如下：

<select id="foo" class="multi-select" data-bind="foreach: availableCountries, selectedOptions:selectedCountries" multiple="multiple">

更好的选择是创建一个自定义的敲除绑定，该绑定可以使Select2随着模型的更改而不断更新

大概是这样的：

HTML:

---

希望这能有所帮助。

两种解决方案都有效。正如Paul所建议的，第二个更干净，因为它更符合MVVM原则。对于那些可能感兴趣的人，你可以在这里查看。谢谢！

function MyViewModel(){
    var self = this;
    self.availableCountries = ko.observableArray(app.availableCountries());
    self.selectedCountries = ko.observableArray([]);

    // added this bit
    self.selectedCountries.subscribe(function (newValue) {
        $('#foo').select2("val", newValue);
    });
}

<select class="multi-select" data-bind="foreach: availableCountries, selectedOptions:selectedCountries, select2: selectedCountries" multiple="multiple">

ko.bindingHandlers.select2 = {
    update: function (element, valueAccessor) {
        $(element).select2("val", ko.unwrap(valueAccessor()) || "");
    }
};