Wie fügt man ein Icon zum ausgewählten Element in select2 hinzu?
Ich benutze fontawesome, und ich möchte ein Symbol zum ausgewählten Element hinzufügen oder entfernen. Also tat ich das: Ссылка (Danke an @Fares M. )
JS
%Vor%HTML
%Vor% Wie Sie sehen, können Sie das Symbol in Hello und Stackoverflow hinzufügen oder entfernen, aber in Friends (das ist die Option, die mit formatSelection und formatResult formatiert wurde), wird das Symbol nicht entfernt , und wenn Sie versuchen, das Symbol hinzuzufügen, hängt das andere an das vorhandene an.
Haben Sie eine Idee, das zu lösen?
11 Antworten
Ich denke, es gibt zwei Möglichkeiten, das zu erreichen:
-
Die erste Lösung ist die bessere,
Sie können es einrichten, indem Sie einfach eine Funktion escapeMarkup definieren select2 -Optionen, und diese Funktion muss die gleichen empfangenen Daten zurückgeben als Eingabeparameter ohne Änderungen.
alles, was Sie brauchen, ist:
%Vor%Hier ist ein funktionierendes Beispiel: Ссылка
-
Die zweite , machen Sie eine kleine Änderung in der Datei select2.js .
Nach der Überprüfung der select2.js habe ich die Funktion gefunden, die den Text aktualisiert, und es gab ein kleines Problem, das select2.js plugin escape html js Injektion zu verhindern, so dass es funktioniert, wie Sie es erwarten Um zu vermeiden, HTML zu entkommen und .html () -Funktion von jquery api anstelle der .append () -Funktion, die in verwendet wird updateSelection Funktion von select2.js .
Hier ist die Funktion, über die ich spreche:
%Vor%lösche dies:
%Vor%und ändern:
%Vor%zu:
%Vor%das ist meiner Meinung nach eine schmutzige Lösung.
Verwenden Sie für die Aktion Entfernen diesen js -Code:
%Vor%
Manbe können Sie den select2 Parameter verwenden: formatResult oder formatSelection wie unten
%Vor%Sie müssen die DOM-Manipulation nicht manuell durchführen
%Vor% Grundsätzlich gibt this.element die Elementinstanz select zurück, auf der Sie .select2("val") ausführen können, um den ausgewählten Wert zu erhalten.
Vergleichen Sie das mit der ID des Objekts, wenn es true ist, dann geben Sie den HTML-Code mit checkbox ein, sonst geben Sie den einfachen Text zurück. Ich denke, das ist es, was Sie erreichen wollten.
Hier ist eine Arbeitsgeige , ich denke, das ist es, was Sie versucht haben zu erreichen
Sie können keine Tags innerhalb der Option hinzufügen. Versuchen Sie, die Optionsschriftart als Schriftfamilie festzulegen: "myfontawesome", arial; und fügen Sie stattdessen Sonderzeichen statt CSS-Ersatz hinzu.
Ich denke, Ihr Problem besteht darin, dass Sie keine Werte stylen oder HTML zu Elementen hinzufügen können, die sich in Dropdown-Auswahl befinden, wie Sie es gerade versuchen ... es ist reiner Text.
%Vor%Sehen Sie, wie Ihre Fidel funktioniert, wenn ich den HTML-Code entferne und nur Klartext hinzufüge :
Ich schlage auch vor, hier zu suchen.
Wenn das Symbol angezeigt werden soll, müssen Sie das HTML-Element als Ziel auswählen und HTML und nicht TEXT einfügen. ziemlich genau so:
%Vor%Siehe Ссылка
ABER. Das HTML-Element, auf das ich zielen muss, ist, wie ich sehen kann, $ (' s2id _ ' + [ aktuelle Element-ID ]). s2 Ich denke für SELECT2 und id_. Ihre Auswahl lautet also id="sel", was $('s2id_sel') bedeutet. Beachten Sie auch, dass Sie herausfinden müssen, welches ausgewählt ist. Es hat, praktischerweise, eine ".select2-selected" -Klasse, die es leicht macht, zu zielen.
Das wird den Wert nicht ändern, nur der LOOK was ich denke was du gerade versuchst zu tun.
Ich hoffe, das hilft
Ich habe einen kleinen Code geändert, um das Datensymbol zu überprüfen
%Vor%Setze data-icon = 0, um zu verhindern, dass icon aus format_select2_icon generiert wird und entferne das Icon.
%Vor%Siehe: Ссылка
Hoffnung, die dir geholfen hat.
Mit Bootstrap Glyphicons kannst du folgendes zu deinem CSS hinzufügen
%Vor% und glyphicon-ok werden an jedes ausgewählte Element angehängt.
Suchen Sie in Bootstrap-Cheatsheet nach Symbolcodes.
Tags und Links javascript html jquery css jquery-select2