Select2 add image icon to option dynamically

Question

This is what select2.github.io gives you:

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

I'd like to add a data-image attribute to my options:

<option value="flag" data-image="/images/flags/flag.png">Country 1</option>

and log it in the function:

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

Sadly, a simple console.log(opt); doesn't return anything in the function, so I can't see if I can access my data-image attribute. The above block of code returns an error, so this obviously doesn't work. Any suggestions on this matter?

An error? What's the specific error message? Do you have a jsfiddle demo? — PeterKA, Mar 26 '15 at 23:04

score 19 · Accepted Answer · edited Jul 30 '18 at 20:30

Solved using attr and tested on 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;
    }
};

score 16 · Answer 2 · edited Jan 06 '21 at 11:33

If optimage returns "undefined" try my sample: its working fine:

$("#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;
  }
};

score 9 · Answer 3 · 2015-10-10T05:39:24.407

9

I solved problem with this 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;
            }

        };

edited Oct 10 '15 at 05:39

answered Oct 08 '15 at 12:35

That is the same as in my example, and that didn't work: var optimage = opt.attr('data-image'); – Warre Buysse Oct 09 '15 at 19:21
I try to complete answer – Oct 10 '15 at 05:40

score 4 · Answer 4 · answered Mar 26 '15 at 23:06

4

Try this:

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

answered Mar 26 '15 at 23:06

PeterKA

22,910
4
23
48

optimage returns "undefined". I have tried it this way too. – Warre Buysse Mar 27 '15 at 07:33

score 0 · Answer 5 · answered Mar 26 '18 at 19:00

0

Not necessarily related to the question, but in my case it wasn't working because if you are using Select 2 < 4.0, templateResult and templateSelection does not exist. Use formatResult and formatSelection instead.

answered Mar 26 '18 at 19:00

Lucas Bustamante

13,827
7
77
75

Select2 add image icon to option dynamically

5 Answers5

Linked

Related