Select2 选择后显示不同的值

Question

我正在尝试找到这个问题的更新答案here，因为似乎 Select2 的 formatSelection 选项不再有效，或者根本不适合我。

基本上，我有一个多 select Select2 菜单，并且希望在 selected 之后显示选项的 value，而不是文字说明。例如，我有一个省份列表，其中每个省份都有一个 shorthand 作为选项的值（AB 代表艾伯塔省，BC 代表不列颠哥伦比亚省等）那些是我希望在 selected 后显示的那些。在 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，现在称为 templating。示例：

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.

Answer 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
});

Select2 选择后显示不同的值

Select2 Display Different Value after selection

jquery

jquery-mobile

jquery-select2