Select2 Bild hinzufügen-Symbol, um die option dynamisch

Dies ist, was select2.github.io bietet Ihnen:

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

Ich möchte noch hinzufügen, dass ein data-image-Attribut, um meine Optionen:

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

und melden Sie es der Funktion:

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

Traurig, eine einfache Konsole.log(opt); nichts zurückgibt, in der Funktion, so kann ich nicht sehen wenn ich auf meine Daten zugreifen kann-Bild-Attribut. Die oben genannten code-block einen Fehler zurück, so dass dies offensichtlich nicht funktioniert. Anregungen zu diesem Thema?

Ein Fehler? Was ist die konkrete Fehlermeldung? Sie haben ein jsfiddle demo?

InformationsquelleAutor Warre Buysse | 2015-03-26

  1. 3

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

    InformationsquelleAutor JHOAN B. HENRICHE

  2. 5

    Ich problem mit diesem 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;
            }

        };
    Das ist der gleiche wie in meinem Beispiel, und das hat nicht funktioniert: var optimage = opt.attr('data-image');
    Ich versuchen Sie, zu beantworten

    InformationsquelleAutor

  3. 3

    Versuchen Sie dies:

    var optimage = $(opt).data('image'); //or $(opt).attr('data-image')
var $opt = $(
    '<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>'
);
    optimage gibt "undefined". Ich habe es versucht, auch auf diese Weise.

    InformationsquelleAutor PeterKA

  4. 0

    Nicht unbedingt im Zusammenhang mit der Frage, aber in meinem Fall war es nicht zu arbeiten, denn wenn Sie mit Select 2 < 4.0, templateResult und templateSelection existiert nicht. Verwenden formatResult und formatSelection statt.

    InformationsquelleAutor Lucas Bustamante

Schreibe einen Kommentar