select2 中的动态编辑选项

Question

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

但是，我在选项中添加了一个可点击的 'edit' 图标，因为它们出现在所选项目的字段中，就在 'delete' 图标旁边。我已经将它连接到一个模态形式，它通过 AJAX 编辑项目。编辑成功后，我显然想更新 select2 字段中的所选选项以匹配它。

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

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

感谢任何帮助。

这就是我设置 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
);

Answer 1

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

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

上jQuery.data()中存储为data键

所以你会打电话给

$option.removeData('data');

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

select2 中的动态编辑选项

Dynamically edit option in select2

jquery

ajax

jquery-select2