如何在select2选项中呈现html

wnvonmuf  于 2022-12-09  发布在  其他
关注(0)|答案(8)|浏览(177)

在这个从远程数据源加载数据的例子中,我可以看到图像和其他html元素呈现为选项。我想使用本地数组中的数据来完成同样的事情。我试着按照文档中的描述构建一个数组,并使用data选项添加它,但html呈现为纯文本:
第一个
如何将html内容添加到select2选项中?

axr492tv

axr492tv1#

好的,我玩了一会儿,找到了一个可行的解决方案,所以我在这里回答我自己的问题。
对我来说,这里的关键是构建一个包含templateSelectiontemplateResult内容的数据数组。后者在下拉列表中呈现得很好,但任何多行内容都不会包含在select2元素中,因此需要内联显示(或至少在一行上显示)。将escapeMarkup定义为选项允许覆盖通常会剥离html内容的核心函数。
定义title属性也很重要,否则工具提示中会出现html标记。
第一个
或者,通过一些小的CSS调整,您可以允许完整的html选项内容显示在select容器中,而无需模板回调:
第一个

bwitn5fc

bwitn5fc2#

如果我没有弄错的话,只有设置了templateResult和templateSelection选项并让它们返回一个jQuery对象,才能呈现HTML。
第一个

x759pob2

x759pob23#

只需将另一个带有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;
   }
});
qc6wkl3g

qc6wkl3g4#

另一个例子定义如下

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的端点结果,如

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

sulc1iza5#

@EatenByAgrue发布的答案的附录
如果需要搜索text(在提供的示例中为enhancementbugAND以及html内容(例如This is some small text),则需要扩展匹配逻辑,如official documentation中所示。
例如:
第一个

plicqrtu

plicqrtu6#

使用

escapeMarkup: function(m) { return m; }

打开XSS漏洞(https://codepen.io/nkorovikov/pen/ZEBdMBP
我没有找到一种方法来使用模板处理数组中的数据,但是模板可以很好地处理 AJAX 中的数据,并且可以直接向HTML中添加select元素

<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

ahy6op9u

ahy6op9u7#

将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

b1uwtaje

b1uwtaje8#

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

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

相关问题