[英]How to display an icon in the chosen item of select2?
我有一個帶有<options>
格式的select2插件。 我在右側添加了一個fontawesome圖標。
問題是,當我選擇帶有圖標的任何項目時,關閉下拉列表時,該圖標不會顯示在所選的當前項目中。 我該怎么解決? 可能是錯誤的格式功能?
這是一個可以嘗試的jsfiddle: http : //jsfiddle.net/uAnLJ/18/
JS
$("#mysel").select2({
width: "100%",
formatResult: function(referencia) {
if (!referencia.id) return referencia.text; // optgroup
if ($(referencia.element).data('active') == "1") {
return referencia.text + "<i class='fa fa-check-circle'></i>";
} else {
return referencia.text;
}
}
});
CSS
body {
padding: 20px;
}
.fa-check-circle{
float: right;
position: relative;
line-height: 20px;
}
HTML
<select id="mysel">
<optgroup label="First group">
<option value="0" data-active="1">Hello</option>
<option value="1" data-active="0">Stack</option>
</optgroup>
<optgroup label="Second group">
<option value="2" data-active="1">Overflow</option>
<option value="3" data-active="1">Friends</option>
</optgroup>
</select>
如果還想更改選定元素的外觀,則需要使用formatSelection
:
formatSelection: function (referencia) {
if ($(referencia.element).data('active') == "1") {
return referencia.text + "<i class='fa fa-check-circle'></i>";
} else {
return referencia.text;
}
}
更新的小提琴: http : //jsfiddle.net/uAnLJ/22/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.