In 这个例子 https://select2.github.io/examples.html#data-ajax从远程源加载的数据中，我可以看到图像和其他 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 选项中？
好的，玩了一段时间并找到了一个可行的解决方案，所以我将在这里回答我自己的问题。
对我来说，关键是构建一个包含两者内容的数据数组templateSelection and 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
