Comment faire pour afficher une icône dans l'article choisi de select2?
-
21-12-2019 - |
Question
J'ai un select2 plugin avec le <options>
formaté.Je vais ajouter une fontawesome icône à la droite.
Le problème est que lorsque je sélectionne un article qui a l'icône, l'icône n'est pas affichée dans le courant de l'élément choisi, lorsque le menu est fermé.Comment pourrais-je le résoudre?Peut-être est faux la fonction format?
Voici un jsfiddle où vous pouvez essayer: 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>
La solution
Vous avez besoin d'utiliser formatSelection
si vous voulez modifier l'apparence de l'élément sélectionné ainsi:
formatSelection: function (referencia) {
if ($(referencia.element).data('active') == "1") {
return referencia.text + "<i class='fa fa-check-circle'></i>";
} else {
return referencia.text;
}
}
Mise à jour de violon: http://jsfiddle.net/uAnLJ/22/
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow