在从远程源加载的数据的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选项?
好吧,玩了一段时间,找到了可行的解决方案,所以我在这里回答自己的问题。
这里的关键是构建一个数据数组,其中包含templateSelection
和templateResult
的内容。后者在下拉列表中呈现find,但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选项内容显示在select容器中,而无需模板回调:
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>
如果我没记错的话,只有在设置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的另一个字段添加到数据数组,并使用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;
}
});
将select2控件中的text属性更改为HTML: