Question

我正在尝试找到此问题here的更新答案，因为似乎Select2的formatSelection选项不再起作用，或者根本不适用于我。

基本上，我有一个多选Select2菜单，并且希望在选择后显示选项的值而不是文本描述。例如，我有一个省份列表，其中每个省都有一个速记作为选项的值（AB表示艾伯塔省，不列颠哥伦比亚省不列颠哥伦比亚省等）那些是我想要的被选中后显示。在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
});

您可以不同地模拟结果和选择; docs 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选择后显示不同的值

2 个答案: