使用jQuery X-Editable库时，修改Select2下拉选择的输出

Question

使用jQuery X-Editable库时，修改Select2下拉选择的输出

javascriptjqueryjquery-select2x-editable

6

我已经尝试了几周使用X-Editable http://vitalets.github.io/x-editable/ 与Select2 https://select2.github.io/，但一直没有成功。

最初，我试图从AJAX请求中加载数据，然后使用库，但我只能看到旧代码，据说可以与两个库的旧版本一起使用。

为了稍微简化事情，我现在决定单独加载我的数据，以便X-Editable和Select2只需要处理一个已经可用的数据数组。

我现在的问题是修改数据的显示。

默认情况下，我对编辑字段的外观感到满意，它看起来像选择“标签”。

当编辑完成并在初始页面加载时，它会将我的选定项目显示为逗号分隔的字符串。我想修改那部分的外观。

我看到了一些示例，它们按照我想要的方式工作，但似乎它们不适用于新版本。

这里的JSFiddle http://jsfiddle.net/jasondavis/j72k110m/ 显示了我想要的输出和功能...几乎，但问题是这个演示正在使用旧版本的Select2库。它有 Select2 version v3.4.4 和 X-Editable version v1.5.1

Select2的最新版本是v4.0.0，X-Editable已经更新到v1.5.1，因为它已经有一段时间没有更新了。

在初始加载和选择新值后，它应该如下所示，这意味着它将我们选定的值包装在一个中：

enter image description here

当单击以编辑选定的值时，它应该看起来像“标签”，但是不应该显示部分！

enter image description here

在这个JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/ 中，我已经将Select2更新到了新版本，并尝试复制上面的另一个JSFiddle中的功能，通过显示选定的值作为“标签”。

这个版本的另一个问题是，当选择值时，它不会从下拉列表中删除选项。因此，即使已经选择了1个项目，它仍然显示为可以再次点击的选项！

另一个问题是，新选择的项目不会添加到非编辑屏幕上。

下面有更多图像来展示我的意思...

以下图像显示了最初的屏幕加载选定的项目以及未处于编辑模式的项目。问题在于它没有更新所选择的新项目。它也显示了所选ID而不是标题/名称

我的最终目标是只需在X-editable字段上使用Select2即可允许选择分配的用户。选择的分配用户将显示Gravatar缩略图和用户名。

Select2和X-Editable都允许使用模板样式输出来修改输出。但当它们一起工作时，它们的默认功能是不同的，并且这些输出修改函数与单独运行任一库时不同。

我知道我想要的可以做到，因为这两个库是相互兼容的，只是需要让较新版本的Select2与长时间未更新的旧版本X-Editable一起使用！

- JasonDavis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Brown-Silva · Accepted Answer

我在测试的最终jsfiddles网址为 https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) 和 https://jsfiddle.net/N6bQE/331/ (poshytip-editable)。

以下是我在尝试让Select2 4.0.0与X-Editable一起工作时做出的一些观察：

您将 data-value 设置为 apples, oranges, pie（请注意空格），这在技术上不正确。 id应完全匹配，但由于旧版Select2中的~~不幸错误~~特性，额外的空格被完全忽略了。

去掉空格可以解决主要问题，即Select2无法正确匹配选项（因此无法显示它们）。
您的source未包含您通过data-value传递的任何值，因此Select2无法显示它们。通过对一些id属性进行排列，当弹出窗口显示时，Select2更接近于显示所选值。
您同时使用了tags和source，而X-Editable不允许这样做。插件似乎优先考虑tags而不是source，因此实际上没有任何内容传递到Select2，您的source被完全忽略。
但这并不太重要，因为X-Editable首先无法正确显示值。您会注意到，data-value被显示为单个标签，而不是拆分并显示为多个标签。为了让X-Editable与此配合使用，您需要在Select2选项中设置separator: ','。尽管Select2不再支持此选项，但X-Editable完全忽略了viewseparator选项，转而使用它。
为了在编辑后更新标签，您需要检查display方法中的value是否为数组。这是因为X-Editable只向display方法返回一个字符串，而不是人们所期望的数组。