Twitter bootstrap 选择2、x-可编辑和引导表兼容性

我使用bootstrap3和。我想使用示例中的“标记”模式

当我使用select2版本3.4.4时，就像在x-editable示例中一样，我的工作正常，但当我想使用最新版本4.0.0时，我的工作不正常

我收到错误消息：

未捕获错误：否select2/compat/inputData

我试图用select2.full.js替换select2.js，但万一可编辑框为空

如何使可编辑单元格与最新版本的select2兼容

html

---

显然，选择2是因为版本4不能再应用于控件。 在select2的GitHub页面上提到：

现在我在代码中添加了新插件。但它抛出了这个错误： 未捕获错误：否select2/compat/inputData 是什么原因造成的

这是因为在输入元素上使用了它。固定的谢谢你的通知

对小提琴的一些调试表明，X-editable确实会首先将表格单元格转换为

<input type="hidden" value="na, an, sd">

然后对其应用select2，但失败。 同时选择2暗示这一点；初始化标记控件的正确方法是从以下位置开始：

您还可以检查在输入上使用它是否确实不起作用并触发相同的错误，您需要选择

要使X-editable和select2 4协同工作，您应该找到一种方法，在创建隐藏输入元素和调用select2之间注入一些代码，以便能够将其转换为select，这与重写X-editable-select2桥大致相同。 不幸的是，我并不精通X-editable代码，也没有设法解决这个问题，但如果您需要使用版本4，可以从select2.js的第4900行开始，在该行中我设置了一个断点，以检查哪个真正的HTMLElement正在传递给select2：

---

解决此问题的另一种方法是在x-editable生成select后手动创建select2：

<a 
    href="#" 
    id="marthafaker"
    data-type="select"
    data-placement="right"
    class="editable editable-click"
    data-pk="@Model.PK" 
    data-value="@Model.ActionId"
    data-title="Select something"
    data-url="/Controller/Action" ></a>

<script>
    $('#marthafaker').editable({
        source: names
    }).on('shown', function(e, editable){
        editable.input.$input.select2({
            width: 400
        });
        editable.input.$input.select2('val', editable.input.$input.val());
    });
</script>

---

也许这会有所帮助：在对话的底部，有人提到select2 4不再对输入标签进行操作。如果我理解，首先你切换编辑，这将把单元格变成输入，然后你应用select2，它在版本4中不支持输入。另外，select2文档在示例中有一个选择：谢谢，你可以将它写为答案，我可以奖励它。

<input type="hidden" value="na, an, sd">

<select data-tags="true" data-placeholder="Select an option"></select>

<a 
    href="#" 
    id="marthafaker"
    data-type="select"
    data-placement="right"
    class="editable editable-click"
    data-pk="@Model.PK" 
    data-value="@Model.ActionId"
    data-title="Select something"
    data-url="/Controller/Action" ></a>

<script>
    $('#marthafaker').editable({
        source: names
    }).on('shown', function(e, editable){
        editable.input.$input.select2({
            width: 400
        });
        editable.input.$input.select2('val', editable.input.$input.val());
    });
</script>