Select2 选择后显示不同的值

Question

我试图在这里找到这个问题的更新答案，因为 Select2 的 formatSelection 选项似乎不再起作用，或者根本不适合我。

基本上，我有一个多选 Select2 菜单，并且希望在选择后显示选项的值，而不是文本描述。例如，我有一个省份列表，其中每个省份都有一个简写作为选项值（AB 表示艾伯塔省，BC 表示不列颠哥伦比亚省等），这些是我希望在选择后显示的省份。在 Select2 4.0.0 中有一个简单的方法可以做到这一点吗？

标记：

<select id="provSelect" multiple data-role="none" >

</select>

对于JS：

$("#provSelect").select2({
          width:"100%",
          formatSelection: formatSelection});

具有适当的功能：

function formatSelection(item){
         return item.id;
}

Answer 1

Select2 仍然有一个格式化 API，现在称为模板。例子：

function formatState (state) {
    if (!state.id) { return state.text; }
    var $state = $(
        '<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
};

$(".js-example-templating").select2({
    templateSelection: formatState
});

您可以以不同的方式对结果和选择进行模板化；文档在这里。