我有一个multiselect小部件，我正在使用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
);
当您在Select2中选择结果时，将<option>自动创建一个标记，该标记的value属性等同id于所选数据对象的。<option>之后，您可以编辑此标签并change在原始选择上触发一个事件，Select2将尝试使用新数据。
如果Select2已经将数据对象缓存到<option>元素上，则会出现问题，因为第一次发生后，数据对象将不会重新生成（有一些小例外）。您需要手动清除缓存，该缓存作为data键存储在jQuery.data()上<option>。
所以你会打电话
$option.removeData('data');
$option指向<option>您刚刚修改的的jQuery元素在哪里。正是在这之后，你触发change事件，那么选择二知道要重建内部缓存和检测所做的更改。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句