In diesem Tutorial wird erläutert, wie Sie in jQuery ein Symbol im Dropdown-Listenfeld festlegen. Das folgende Beispiel zeigt das Einstellungssymbol für bestimmte Werte in der Dropdown-Menüliste. In diesem Beispiel verwenden wir zwei Gruppen innerhalb des Select-Elements. Das konnten wir sehen, wir haben data („aktiv“) auf 0 gesetzt; Dies bedeutet, dass nur Optionen, die mit data-active=0 definiert sind, mit einem Punktkreissymbol in grüner Farbe angezeigt werden.
Der select2 ist einjQuery-basierter Ersatz für Auswahlfelder. Es bietet einige zusätzliche Funktionen und macht Auswahlfelder benutzerfreundlicher. Wenn Sie diese Funktionalität nutzen möchten, müssen Sie das Plugin in Ihre Webseite importieren. Es bietet Unterstützung für die Suche, Remote-Datensätze und das unendliche Scrollen der Ergebnisse. Sehen wir uns das Beispiel an, wie das Symbol in der Dropdown-Liste festgelegt wird.
Beispiel für ein JQuery Select2-Plugin
<pre title=""><html>
<head>
<title>JQuery-Setting Icon in the Dropdown List Box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ivaynberg.github.io/select2/select2-3.4.5/select2.js" type="text/javascript"></script>
<link href="http://ivaynberg.github.io/select2/select2-3.4.5/select2.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
body {
padding: 10px;
}
.fa-dot-circle-o {
float: right;
line-height: 20px;
color:green;
}
</style>
</head>
<body>
<select id="myval" style>
<optgroup label="My First Group">
<option value="0" data-active="0">Hello!!!</option>
<option value="1" data-active="1">Dot Circle 1</option>
<option value="2" data-active="0">Dot Circle 2</option>
</optgroup>
<optgroup label="My Second Group">
<option value="2" data-active="0">Dot Circle 3</option>
<option value="3" data-active="1">Dot Circle 4</option>
<option value="3" data-active="0">Dot Circle 5</option>
</optgroup>
</select>
<script>
$("#myval").select2({
width: "50%",
formatResult: function (state) {
if (!state.id) return state.text;
if ($(state.element).data('active') == "0") {
return state.text + "<i ></i>";
} else {
return state.text;
}
},
formatSelection: function (state) {
if ($(state.element).data('active') == "0") {
return state.text + "<i ></i>";
} else {
return state.text;
}
}
});
</script>
</body>
</html></pre>
- Wie im obigen Skript gezeigt, haben wir die externen Ressourcen „select2.js“, „select2.css“ und „font-awesome.css“ eingebunden, um das Programm korrekt auszuführen. Der .select2 ist ein jQuery-basierter Ersatz für Auswahlfelder, der die Suche, das Scrollen von Ergebnissen usw. unterstützt Schriftart-fantastisch Bietet skalierbare Vektorsymbole, die sofort angepasst werden können, z. B. Größe, Farbe oder alles, was mit CSS möglich ist.
- Wir verwenden zwei Gruppen innerhalb des ausgewählten Elements. Das konnten wir sehen, wir haben data („aktiv“) auf 0 gesetzt; Dies bedeutet, dass nur Optionen, die mit data-active=0 definiert sind, mit einem Punktkreissymbol in grüner Farbe angezeigt werden.
- Im Skript verwenden wir select2 jQuery-Plugin welches die ID des ausgewählten Elements verwendet, um das Dropdown-Listenfeld anzuzeigen. Es nutzt auch formatResult Methode, die das Element für die Anzeige im Eingabefeld formatiert, sobald es ausgewählt ist. Jede Zeile ist eine Datenzeile, die an die Methode formatResult übergeben wird Formatauswahl Die Methode wird verwendet, um das Aussehen des ausgewählten Elements im Dokument zu ändern.
- In Zukunft enthält die formatResult-Funktion einen Parameter namens state, der prüft, ob Daten aktiv = 0 sind. Die Elemente, die mit data active=0 übereinstimmen, werden mit einem grünen Farbpunktkreis im Dropdown-Listenfeld zurückgegeben und wie in der obigen Anweisung erwähnt, der Formatauswahl, die zum Ändern des Aussehens des übereinstimmenden Elements im Dokument verwendet wird.
JQuery Select2-Plugin-Demo
Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:
In diesem Tutorial wird erläutert, wie Sie in jQuery ein Symbol im Dropdown-Listenfeld festlegen. Das folgende Beispiel zeigt das Einstellungssymbol für bestimmte Werte in der Dropdown-Menüliste. In diesem Beispiel verwenden wir zwei Gruppen innerhalb des Select-Elements. Das konnten wir sehen, wir haben data („aktiv“) auf 0 gesetzt; Dies bedeutet, dass nur Optionen, die mit data-active=0 definiert sind, mit einem Punktkreissymbol in grüner Farbe angezeigt werden.
