Select2 Bildsymbol dynamisch zur Option hinzufügen

Lesezeit: 2 Minuten

Benutzer-Avatar
Warre Buysse

Das bietet Ihnen select2.github.io:

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }
    var $opt = $(
            '<span><img src="https://stackoverflow.com/images/flags/" + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

Ich möchte meinen Optionen ein data-image-Attribut hinzufügen:

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

und melden Sie es in der Funktion an:

function addIcons(opt) {
    if (!opt.id) {
        return opt.text;
    }

    var optimage = opt.attr('data-image');
    var $opt = $(
            '<span><img src="https://stackoverflow.com/images/flags/" + optimage + '" class="img-flag" /> ' + opt.text + '</span>'
            );
    return $opt;
}

Leider ist eine einfache console.log(opt); gibt in der Funktion nichts zurück, daher kann ich nicht sehen, ob ich auf mein data-image-Attribut zugreifen kann. Der obige Codeblock gibt einen Fehler zurück, also funktioniert das offensichtlich nicht. Irgendwelche Vorschläge zu diesem Thema?

  • Ein Fehler? Wie lautet die konkrete Fehlermeldung? Haben Sie eine jsfiddle-Demo?

    – PeterKA

    26. März 2015 um 23:04 Uhr

Benutzer-Avatar
JHOAN B. HENRICHE

Gelöst mit attr und getestet auf 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="'%20+%20optimage%20+%20'" width="60px" /> ' + opt.text.toUpperCase() + '</span>'
        );
        return $opt;
    }
};

Benutzer-Avatar
Gökhan Hayirsever

Wenn optimage “undefined” zurückgibt, versuchen Sie mein Beispiel: es funktioniert gut:

$("#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="'%20+%20optimage%20+%20'" class="userPic" /> ' + $(opt.element).text() + '</span>'
    );
    return $opt;
  }
};

Ich habe das Problem mit diesem Code gelöst: 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="'%20+%20optimage%20+%20'" width="23px" /> ' + opt.text + '</span>'
                );
                return $opt;
            }

        };

  • Das ist dasselbe wie in meinem Beispiel, und das hat nicht funktioniert: var optimage = opt.attr(‘data-image’);

    – WarreBuysse

    9. Oktober 2015 um 19:21 Uhr


  • Ich versuche die Antwort zu vervollständigen

    Benutzer4540007

    10. Oktober 2015 um 5:40 Uhr

Versuche dies:

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

Nicht unbedingt im Zusammenhang mit der Frage, aber in meinem Fall hat es nicht funktioniert, denn wenn Sie Select 2 < 4.0 verwenden, templateResult und templateSelection ist nicht vorhanden. Verwenden formatResult und formatSelection stattdessen.

1016140cookie-checkSelect2 Bildsymbol dynamisch zur Option hinzufügen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy