jQuery 如何在select2选项中呈现html

How to render html in select2 options

提问by billynoah

In this exampleof data loaded from a remote source I can see images and other html elements rendered as options. I'd like to accomplish the same thing using data in a local array. I've tried building an array as described in the documentation and adding it with the dataoption but the html is rendered as plaintext:

在这个从远程源加载数据的示例中，我可以看到图像和其他 html 元素呈现为选项。我想使用本地数组中的数据来完成同样的事情。我已经尝试按照文档中的描述构建一个数组并将其添加到data选项中，但 html 呈现为纯文本：

var data = [
  { id: 0, text: '<div style="color:green">enhancement</div>' },
  { id: 1, text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>' }];

$("select").select2({
  data: data
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select></select>

How can I add html content to the select2 options?

如何将 html 内容添加到 select2 选项中？

回答by billynoah

Ok, played with this for a while and found a working solution so I'll answer my own question here.

好的，玩了一段时间并找到了一个可行的解决方案，所以我将在这里回答我自己的问题。

The key here for me is to build a data array with content for both templateSelectionand templateResult. The latter renders fine in the dropdown but any multiline content will not be contained in the select2 element so needs to be displayed inline (or at least on a single line). Defining escapeMarkupas an option allows overriding of the core function which would normally strip out html content.

这里对我来说，关键是要建立与两个内容的数据阵列templateSelection和templateResult。后者在下拉列表中呈现良好，但任何多行内容都不会包含在 select2 元素中，因此需要内联显示（或至少在单行上显示）。定义escapeMarkup为选项允许覆盖通常会删除 html 内容的核心功能。

It's also important to define the titleattribute since otherwise you'll end up with html tags in the tooltip.

定义title属性也很重要，否则工具提示中会出现 html 标签。

var data = [{
  id: 0,
  text: '<div style="color:green">enhancement</div>',
  html: '<div style="color:green">enhancement</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',
  title: 'enchancement'
}, {
  id: 1,
  text: '<div style="color:red">bug</div>',
  html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>',
  title: 'bug'
}];

$("select").select2({
  data: data,
  escapeMarkup: function(markup) {
    return markup;
  },
  templateResult: function(data) {
    return data.html;
  },
  templateSelection: function(data) {
    return data.text;
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select></select>

Alternately, with a couple small CSS tweaks you can allow the full html option content to display inside of the select container without the need for the template callbacks:

或者，通过一些小的 CSS 调整，您可以允许完整的 html 选项内容显示在选择容器内，而无需模板回调：

var data = [{
  id: 0,
  text: '<div style="font-size: 1.2em; color:green">enhancement</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',
  title: 'enchancement'
}, {
  id: 1,
  text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>',
  title: 'bug'
}];

$("select").select2({
  data: data,
  escapeMarkup: function(markup) {
    return markup;
  }
})

.select2-container .select2-selection--single {
  height: auto!important;
  padding: 5px 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal!important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  white-space: normal!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select style="width: 100%"></select>

回答by apokryfos

If I am not mistaken you can only render HTML if you set the templateResult and templateSelection options and have them return a jQuery object.

如果我没记错的话，您只能在设置 templateResult 和 templateSelection 选项并让它们返回一个 jQuery 对象的情况下呈现 HTML。

var data = [
      { id: 0, text: '<div style="color:green">enhancement</div>' },
      { id: 1, text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>' }];

    $("select").select2({
      data: data,
      templateResult: function (d) { return $(d.text); },
      templateSelection: function (d) { return $(d.text); },
      
    })

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

    <select></select>
 

回答by Abdalla Arbab

Simply you can add another field with the html to your data array and make your own template using the templateResultoption like so

只需将带有 html 的另一个字段添加到您的数据数组中，并使用这样的templateResult选项 制作您自己的模板

JSFiddle Demo

JSFiddle Demo

var data = [{
   id: 0,
   text: 'enhancement',
   html: '<div style="color:green">enhancement</div>'
}, {
   id: 1,
   text: 'bug',
   html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>'
}];

function template(data) {
    return data.html;
}

$("select").select2({
   data: data,
   templateResult: template,
   escapeMarkup: function(m) {
      return m;
   }
});

回答by Erick D. Machado Alvarez

Another example is defined like so

另一个例子是这样定义的

function template(data) {
    if ($(data.html).length === 0) {
        return data.text;
    }
    return $(data.html);
}

$("select").select2({
   ajax: {
        url: 'routeurl',
        dataType: 'json',
        type: 'POST',
        processResults: function(data) {
            return {
                results: data
            };
        },
        cache: true
    },
    allowClear: true,
    placeholder: 'Select at least one element',
    templateResult: template,
    templateSelection: template
});

The Endpoint result with format json as so

格式为 json 的端点结果如此

[{
   id: 0,
   text: 'enhancement',
   html: '<div style="color:green">enhancement</div>'
}, {
   id: 1,
   text: 'bug',
   html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>'
}, {
   id: 2,
   text: 'success',
   html: 'Success'
}]

回答by M. Salah

Change the text property to HTML in select2 control:

在 select2 控件中将 text 属性更改为 HTML：

$(document).ready(function() {

  function select2OptionFormat(option) {
    var originalOption = option.element;
      if ($(originalOption).data('html')) {
        return $(originalOption).data('html');
      }          
      return option.text;
  }


  $('select').select2({
    formatResult: select2OptionFormat,
    formatSelection: select2OptionFormat,
    escapeMarkup: function(m) { return m; }
  });


});

Reference : https://codepen.io/kohnmd/pen/KwYvvM

参考：https: //codepen.io/kohnmd/pen/KwYvvM