select2中的动态编辑选项答案

【问题标题】：Dynamically edit option in select2select2中的动态编辑选项
【发布时间】：2015-08-16 02:29:56
【问题描述】：

我有一个使用 select2 的多选小部件。我通过 AJAX 加载选项，一切正常。

但是，我在选项中添加了一个可点击的“编辑”图标，因为它们显示在“删除”图标旁边的选定项中。我已经将它连接到一个模态表单，它通过 AJAX 编辑项目。编辑成功后，我显然想更新 select2 字段中的选定选项以匹配此。

有没有办法用select2以这种方式编辑选定的选项？

我已经尝试编辑标签并在选项上执行 .trigger('change') 但它没有做任何事情。我还查看了 select2 文档中的编程访问示例，但它们似乎更多地是关于选择已经存在的选项，而不是编辑选项本身的“文本”。

任何帮助表示赞赏。

这就是我设置 select2 小部件的方式：

function formatFlavorSelection(flavor) {
    var $flavor = $(
        '<span class="glyphicon glyphicon-pencil" onClick="editFlavorSelection(' + flavor.id + ', event);"></span><span>' + flavor.text + '</span>'
    );
return $flavor;

};

$(".select2-flavor").select2(
    ajax: {
        url:url,
        dataType: 'json',
        delay: 250,
        data: function (params) { 
            return { 
                q: params.term // search term
            };
        },
        processResults: function (data, page) {
            var resultData = [];
            data.forEach(function(entry) {
                resultData.push({ id: entry.id, text: entry[dataName]})
            });
            return {
                results: resultData
            };
        },
        cache: true
    },
    minimumInputLength: 0,
    templateSelection = formatFlavorSelection
);

【问题讨论】：

你能展示一些你所做的代码吗？

标签： jquery ajax jquery-select2

【解决方案1】：

当您在 Select2 中选择结果时，会自动创建一个 <option> 标记，其中 value 属性等效于所选数据对象的 id。之后您可以编辑此<option> 标签并在原始选择上触发change 事件，Select2 将尝试使用新数据。

如果您 Select2 已经将数据对象缓存到 <option> 元素上，就会出现问题，因为数据对象在第一次发生后不会重新生成（除了一些小例外）。需要手动清空缓存，缓存在<option>上的jQuery.data()中存储为data键。

所以你会打电话

$option.removeData('data');

其中$option 是一个jQuery 元素，指向您刚刚修改的<option>。 在此之后您触发了change 事件，因此 Select2 知道要重建内部缓存并检测所做的更改。

【讨论】：