C'est ce que select2.github.io vous donne:
function addIcons(opt) {
if (!opt.id) {
return opt.text;
}
var $opt = $(
'<span><img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</span>'
);
return $opt;
}
J'aimerais ajouter un attribut image de données à mes options:
<option value="flag" data-image="/images/flags/flag.png">Country 1</option>
et connectez-le dans la fonction:
function addIcons(opt) {
if (!opt.id) {
return opt.text;
}
var optimage = opt.attr('data-image');
var $opt = $(
'<span><img src="/images/flags/' + optimage + '" class="img-flag" /> ' + opt.text + '</span>'
);
return $opt;
}
Malheureusement, un simple console.log (opt); ne renvoie rien dans la fonction, je ne vois donc pas si je peux accéder à mon attribut data-image. Le bloc de code ci-dessus renvoie une erreur, donc cela ne fonctionne évidemment pas. Des suggestions à ce sujet?
Résolu avec attr
et testé sur Select2 4.0.6-rc.0.
$(".class").select2({
templateResult: formatState,
templateSelection: formatState
});
function formatState (opt) {
if (!opt.id) {
return opt.text.toUpperCase();
}
var optimage = $(opt.element).attr('data-image');
console.log(optimage)
if(!optimage){
return opt.text.toUpperCase();
} else {
var $opt = $(
'<span><img src="' + optimage + '" width="60px" /> ' + opt.text.toUpperCase() + '</span>'
);
return $opt;
}
};
Si Optimage renvoie "undefined", essayez mon échantillon: cela fonctionne bien:
$("#selectUserForChat").select2({
templateResult: addUserPic,
templateSelection: addUserPic
});
function addUserPic (opt) {
if (!opt.id) {
return opt.text;
}
var optimage = $(opt.element).data('image');
if(!optimage){
return opt.text;
} else {
var $opt = $(
'<span class="userName"><img src="' + optimage + '" class="userPic" /> ' + $(opt.element).text() + '</span>'
);
return $opt;
}
};
J'ai résolu le problème avec ce code: var optimage = $(opt.element).data('image');
$(".category").select2({
templateResult: formatState,
templateSelection: formatState
});
function formatState (opt) {
if (!opt.id) {
return opt.text;
}
var optimage = $(opt.element).data('image');
if(!optimage){
return opt.text;
} else {
var $opt = $(
'<span><img src="' + optimage + '" width="23px" /> ' + opt.text + '</span>'
);
return $opt;
}
};
Essaye ça:
var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
'<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);
Pas nécessairement lié à la question, mais dans mon cas, cela ne fonctionnait pas, car si vous utilisez Select 2 <4.0, templateResult
et templateSelection
n'existe pas. Utilisez plutôt formatResult
et formatSelection
.