web-dev-qa-db-fra.com

Select2 ajouter une image à l'option de manière dynamique

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?

jqueryjquery-select2
12
Warre Buysse

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;
    }
};
4
JHOAN B. HENRICHE

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;
	}
};

9
Gökhan Hayırsever

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;
            }

        };
5
user4540007

Essaye ça:

var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
    '<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);
3
PeterKA

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.

0
Lucas Bustamante