Select2自定义渲染

时间:2018-02-26 19:52:31

标签: javascript jquery jquery-select2

我正在使用jQuery select2库并启用了标记,以便我可以动态地向下拉列表添加选项。但是,我想自定义标签选项的外观,以便明确选择它将添加选项。这是我的设置:

debut = Allouer();

目前它呈现如下:

enter image description here

但我希望它能够呈现这样的东西:

enter image description here

我尝试使用createTag属性,但无法找到解决方案。

1 个答案:

答案 0 :(得分:1)

设置配置选项templateResult(选项如何显示在下拉列表中)和templateSelection(如何呈现所选选项)。这两个都是回调,因此值将是一个函数。

以下是文档Dropdown section中显示的示例:

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

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

有关配置选项的概述,另请参阅configuration API