jquery-select2Erste Schritte mit jquery-select2


Bemerkungen

In diesem Abschnitt erhalten Sie einen Überblick darüber, was jquery-select2 ist und warum ein Entwickler es verwenden möchte.

Es sollte auch alle großen Themen in jquery-select2 erwähnen und auf die verwandten Themen verweisen. Da die Dokumentation für jquery-select2 neu ist, müssen Sie möglicherweise erste Versionen dieser verwandten Themen erstellen.

Versionen

Ausführung Versionshinweis-Link Veröffentlichungsdatum
4.0.3 (aktuell) Select2 4.0.3 2016-05-27
4.0.2 Select2 4.0.2 2016-03-09
4.0.2 RC1 Select2 4.0.2-rc1 2016-02-14
4.0.1 Select2 4.0.1 2015-11-27
4.0.1 RC1 Select2 4.0.1-rc1 2015-11-10
3.5.4 Auswahl2 3.5.4 2015-08-30
3.5.3 Select2 3.5.3 2015-08-20
** Ältere Versionen finden Sie unter: select2 / release 2015-08-20

Jquery - Select2 Installation und Setup

Sie können Select2 auf eine der beiden Arten einschließen / installieren

  1. Verwenden Sie CDNs direkt in Ihrem Projekt unter dem Kopfbereich Ihres Projekts.

link href = " https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css " rel = "stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"/>
 
  1. Laden Sie den Code auf Ihren lokalen Computer herunter und fügen Sie ihn in Ihr Projekt ein. es sollte so aussehen Geben Sie hier die Bildbeschreibung ein

Fügen Sie diese Zeilen dann in den Kopfbereich Ihrer HTML-Seite ein

  <link href="select2.min.css" rel="stylesheet" />
  <script src="select2.min.js"></script>
 

Hinweis: Sie müssen Jquery in Ihr Projekt aufnehmen, damit Select2 ordnungsgemäß funktioniert.

PITFALL: Wenn die aktuelle Version von jquery und Select2 in Konflikt stehen oder die Select2-Funktionen nicht funktionieren. Verschieben Sie dann die select2-Variablen und -Implementierungen in einen separaten Block des Dokumenthauptkörpers $ (document) .ready (function () {// Ihr select2-Code .....});

So verwenden Sie es: Sie können ein <select> wie folgt definieren:

<select id="select2_example">
    <option>Test</option>
</select>
 

Ansatz1:

      var _mSelect2 = $("#select_example").select2();
 

Ansatz2:

  <script type="text/javascript">
      $('select').select2();
  </script>
 

Bitte beachten Sie, dass bei diesem Ansatz die gesamte 'select'-Steuerung der Seite die Funktionen von Select2 übernimmt. Wenn Sie Select2 nur für bestimmte Steuerelemente verwenden möchten, überspringen Sie diesen Schritt und schreiben Sie Ihren eigenen Code, um die select2-Funktion direkt und die jquery / javascript-Funktion für andere select-Steuerelemente zu verwenden. Sie können jedoch den von Select2 für Jquery manipulierten Wert oder umgekehrt verwenden.

Weitere Beispiele für ‚The Basics‘ können in der Select2 GIT - Dokumentation finden Sie hier

Select2 GIT-Projekt ist da . Bitte besuchen Sie die Select2 Github-Website, um Details zu diesem Produkt zu erhalten.

So löschen Sie die ausgewählten Elemente der Dropdown-Liste Select2.

Um die Auswahl der Werte zu löschen, die mit einer Select2 ausgewählt werden, können Sie die Funktion empty () verwenden.

<select id="select2_example">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
 

Die Dropdown-Liste kann mit Jquery zurückgesetzt werden.

$("#select2_example").empty();
 

Es kann auch wie folgt zurückgesetzt werden.

$("#select2_example").select2("val", "");