Select2组件选择完成后如何移除选中结果中显示的图片

解决方法 #

问题根源是当前Select2的下拉选项渲染、选中结果渲染共用了同一个带图片的模板函数，拆分两个不同的渲染函数即可实现需求：

// 下拉选项渲染模板：保留原有的图片显示逻辑
function formatResult(data) {
    if (!data.id) {
        return data.text;
    }
    let imgProfile = $(data.element).data("src");
    var $result = $(
        `<span class='d-flex justify-content-between'>${data.text} <img src="/img/${imgProfile}" style="max-height:60px;"> </span>`
    );
    return $result;
}

// 选中结果渲染模板：仅返回文本，不加载图片
function formatSelection(data) {
    return data.text;
}

$("#taskPIC").select2({
    placeholder: "Person in charge(PIC)",
    allowClear: true,
    templateResult: formatResult, // 下拉列表用带图模板
    templateSelection: formatSelection // 选中结果用无图模板
});

注：原代码中d-flex类重复定义，上面的代码已同步删除冗余项。如果需要给选中结果添加自定义样式，也可以在formatSelection函数中返回带样式的span结构，只要不插入img标签即可。

内容的提问来源于stack exchange，提问作者MOHAMMAD FARHAN FAJRUL HAQ