Question

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

但是，我添加了一个可点击的“编辑”功能。所选项目字段中显示的选项图标，紧邻“删除”字样旁边的选项图标。我把它连接到一个模式形式，通过AJAX编辑项目。编辑成功后，我显然想要更新select2字段中的选定选项以匹配此选项。

有没有办法用select2？

以这种方式编辑选定的选项

我已尝试编辑代码并对该选项执行.trigger（＆＃39;更改＆＃39;）但它没有做任何事情。我还查看了select2文档中的程序访问示例，但它们似乎更多的是选择现有选项而不是编辑＆＃39;文本＆＃39;选项本身。

任何帮助表示感谢。

这就是我设置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中选择结果时，会自动创建<option>标记，其中value属性等同于所选数据对象的id。您可以在之后编辑此<option>代码并在原始选择上触发change事件，而Select2将尝试使用新数据。

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

所以你打电话给

$option.removeData('data');

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

在select2

1 个答案: