如何在select2选项中呈现html答案

【问题标题】：How to render html in select2 options如何在select2选项中呈现html
【发布时间】：2016-07-21 12:33:21
【问题描述】：

在从远程源加载的数据的this example 中，我可以看到呈现为选项的图像和其他 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>

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

【问题讨论】：

标签： jquery html jquery-select2 jquery-select2-4

【解决方案1】：

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

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

定义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>

或者，通过一些小的 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>

【讨论】：

比利的答案很好！
方法就像魅力一样。但是，如果您不将所有内容包装在 $(function(){}); Select2 中，则会填充您的数据，但没有 HTML。好东西要指出。希望这会对某人有所帮助。
@WaiylKarim - 这可能取决于事情的顺序。只要我的 javascript 出现在标记之后，这对我来说就很好。
@billynoah 同意

【解决方案2】：

如果我没记错的话，只有设置了 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>

【讨论】：

谢谢 - 实际上也刚刚得到那一点。这是正确的方向，但如您所见，完整的 html 内容一旦选择就无法很好地呈现，因此需要两种不同的格式。尽管如此，这具有完成工作的重要组成部分，所以我会给它一个赞成票;-)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

另一个例子是这样定义的

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

格式为json的Endpoint结果

[{
   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'
}]

【讨论】：

【解决方案5】：

使用

escapeMarkup: function(m) { return m; }

打开 XSS 漏洞 (https://codepen.io/nkorovikov/pen/ZEBdMBP)

我没有找到将模板用于数组数据的方法，但模板完美地适用于来自 ajax 的数据以及将选择元素直接添加到 HTML 时

<select class="templatingSelect2">
        <option value=""></option>
        <option value="usd">USD</option>
        <option value="euro">Euro</option>
        <option value="gbp">Pound</option>
        </select>

(https://codepen.io/SitePoint/pen/bELxVw)

【讨论】：

【解决方案6】：

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


});

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

【讨论】：

【解决方案7】：

这里有一个使用 jQuery 的替代选项

$('.select2').on("select2:open", function(e) {
        setTimeout(function(){
            $('#select2-myselect2name-results li').after('my html code here');
        }, 500);
 });

【讨论】：