Knockout.js 使用ajax选择2，多个和剔除绑定不将对象保存到selectedOptions

我正在评估Select2V4.0与我们从v3.5.x升级的关系。我们在淘汰版v3.5.2中使用它。我们的场景是，我们希望允许用户根据来自ajax调用的js对象选择多个选项。selectedoptions绑定应该将整个js对象存储在observablearray中，而不仅仅是ID列表

在我的测试中，以下是我发现的

这是一个带有预定义选项列表的select2。每个选项都有一个id、text和displayText属性。结果是，multipleSelectedObjects observable数组最终拥有一个包含整个js对象的数组，这是基于我没有设置optionsValue参数这一事实所期望的

<select class="multipleSelect" data-bind="options: multipleOptions, selectedOptions: multipleSelectedObjects, optionsText: 'displayText', select2v4: multipleOptionsSetup" style="width: 200px">

<select class="multipleSelect3" data-bind="options: multipleOptions, selectedOptions: multipleSelectedValue, optionsText: 'text', optionsValue: 'id', select2v4: multipleOptionsSetup" style="width: 200px">

---

您好，您是否尝试使用Options AfterRender设置该值

这对我很有用：

<select id="selectArticles" multiple
 data-bind="options: availableArticles, selectedOptions: selectedArticles,
 optionsText: function(item){return item.title},
 optionsAfterRender: function(option, item){option.value = item}">
</select>

---

您好，您是否尝试使用选项AfterRender设置该值

这对我很有用：

<select id="selectArticles" multiple
 data-bind="options: availableArticles, selectedOptions: selectedArticles,
 optionsText: function(item){return item.title},
 optionsAfterRender: function(option, item){option.value = item}">
</select>

---

与以前的版本相比，select2 v4的内部工作方式有许多重大变化。其中之一是select2在使用ajax加载数据（又称typeahead）的情况下如何存储所选对象。我的一位同事发现，在这种情况下，所选对象存储在只读集合中，并且在进行更改时不会正确通知，加上正常绑定无法按预期工作。正如我们所发现的，绑定到selectedOptions并没有产生对象列表，而是ID列表。他提出了下面所示的select2绑定处理程序，它将处理常规的select样式绑定，并添加一个名为selectData的新绑定，如果您使用ajax远程数据加载，它将为您提供一个选定对象的列表。只有在使用ajax加载数据并希望获得选定对象的列表而不是ID时，才需要selectData绑定，否则可以绑定到value或selectedOptions，设置类型将按预期工作

<select id="select2Input" data-bind="select2Data: selectedItems, select2: selectSetup" style="width: 400px"></select>

---

与以前的版本相比，select2 v4的内部工作方式有许多重大变化。其中之一是select2在使用ajax加载数据（又称typeahead）的情况下如何存储所选对象。我的一位同事发现，在这种情况下，所选对象存储在只读集合中，并且在进行更改时不会正确通知，加上正常绑定无法按预期工作。正如我们所发现的，绑定到selectedOptions并没有产生对象列表，而是ID列表。他提出了下面所示的select2绑定处理程序，它将处理常规的select样式绑定，并添加一个名为selectData的新绑定，如果您使用ajax远程数据加载，它将为您提供一个选定对象的列表。只有在使用ajax加载数据并希望获得选定对象的列表而不是ID时，才需要selectData绑定，否则可以绑定到value或selectedOptions，设置类型将按预期工作

<select id="select2Input" data-bind="select2Data: selectedItems, select2: selectSetup" style="width: 400px"></select>

---

select2没有将对象返回selectedOptions变量，我也遇到了同样的问题。如果我不应用select2而只是使用knockout，它工作得很好，但看起来不太好。select2没有将对象返回selectedOptions变量，我也有同样的问题。如果我不应用select2，只使用knockout，它可以很好地工作，但看起来不太好。您在您的和我的中设置了一个预定义的选项列表，我在使用ajax进行提前键入搜索。我有一个类似的示例，其中我像您一样定义了一个静态选项列表，整个绑定按预期工作，并将js对象放在selectedOptions列表中。如果我设置了完全相同的绑定，但去掉了options参数，并在select2设置中使用ajax，那么选择一个项目会将其id放入selecteditems列表中，而不是js对象。看来我真的不明白你在做什么，抱歉。在我的项目中，我还通过ajax调用（不使用select2）加载可用的对象，并将它们提供给ObservalArray。我还将可用对象替换为全新对象（来自ajax请求），只保留已选择的项目。你能再解释一下你想做什么吗？对不起，我想应该更具描述性。当我说我使用ajax时，我指的是select2支持的内置typeahead搜索。下面是我正在使用的设置类型的示例。我认为在这种情况下，select2可能会做一些不同的事情，因为它试图保存到observablearray。我的设置类似于select2示例的加载远程数据部分。难道你不能使用ajax调用的processResults部分来完成我在示例中对observableArray所做的工作吗？当我有时间的时候，我会试着做一把小提琴来做这件事。您在您的和我的中设置了一个预定义的选项列表，我在使用ajax进行提前键入搜索。我有一个类似的示例，其中我像您一样定义了一个静态选项列表，整个绑定按预期工作，并将js对象放在selectedOptions列表中。如果我设置了完全相同的绑定，但去掉了options参数，并在select2设置中使用ajax，那么选择一个项目会将其id放入selecteditems列表中，而不是js对象。看来我真的不明白你在做什么，抱歉。在我的项目中，我还通过ajax调用（不使用select2）加载可用的对象，并将它们提供给ObservalArray。我还将可用对象替换为全新对象（来自ajax请求），只保留已选择的项目。你能再解释一下你想做什么吗？对不起，我想应该更具描述性。当我说我使用ajax时，我指的是select2支持的内置typeahead搜索。我在这里