Select2 选择后显示不同的值答案

【问题标题】：Select2 Display Different Value after selectionSelect2 选择后显示不同的值
【发布时间】：2015-06-29 14:26:38
【问题描述】：

我正在尝试找到此问题的更新答案here，因为 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;
}

【问题讨论】：

嗯，我不认为有什么可展示的。我从文本文件中动态添加项目，因此我的标记为空。我已经更新了我的帖子。

标签： jquery jquery-mobile jquery-select2

【解决方案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
});

您可以对结果和选择进行不同的模板化；文档here.

【讨论】：

出于我的目的，我不得不使用 templateSelection 选项而不是 templateResult，但这实现了我想要的 :) 感谢您为我指明了正确的方向。
@mbassett 没问题，很高兴我能帮上忙！

【解决方案2】：

可以在此处找到模板选择 -> https://select2.org/selections 或查看以下示例：

    function formatState (state) {
  if (!state.id) {
    return state.text;
  }

  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img class="img-flag" /> <span></span></span>'
  );

  // Use .text() instead of HTML string concatenation to avoid script injection issues
  $state.find("span").text(state.text);
  $state.find("img").attr("src", baseUrl + "/" + state.element.value.toLowerCase() + ".png");

  return $state;
};

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

【讨论】：