jquery-select2Komma igång med jquery-select2


Anmärkningar

Det här avsnittet ger en översikt över vad jquery-select2 är och varför en utvecklare kanske vill använda den.

Det bör också nämna alla stora ämnen inom jquery-select2 och länka till relaterade ämnen. Eftersom dokumentationen för jquery-select2 är ny kan du behöva skapa initialversioner av relaterade ämnen.

versioner

Version Releaser för utgåvanmärkningar Utgivningsdatum
4.0.3 (nuvarande) Välj2 4.0.3 2016/05/27
4.0.2 Välj2 4.0.2 2016/03/09
4.0.2 RC1 Välj2 4.0.2-rc1 2016/02/14
4.0.1 Välj2 4.0.1 2015/11/27
4.0.1 RC1 Välj2 4.0.1-rc1 2015/11/10
3.5.4 Välj2 3.5.4 2015/08/30
3.5.3 Välj2 3.5.3 2015/08/20
** Äldre versioner finns på: SELECT2 / Upplåsning 2015/08/20

Jquery - Select2 Installation and Setup

Du kan inkludera / installera Select2 på ett av de två sätten

  1. Direkt med hjälp av CDN: er i ditt projekt under projektets huvuddel.

länk href = " https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css " rel = "stilark" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"/>
 
  1. Ladda ner koden till din lokala maskin och inkludera den i ditt projekt. det ska se ut så här ange bildbeskrivning här

Ta sedan med dessa rader i huvudavsnittet på din html-sida

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

Obs: Du måste ha Jquery med i ditt projekt för att Select2 ska fungera korrekt.

PITFALL: om Aktuell version av jquery och Select2 är motstridiga eller Select2-funktionerna inte fungerar. Flytta sedan select2-variablerna och implementeringarna i ett separat block av dokumentkroppen $ (dokument). Redan (funktion () {// din select2-kod .....});

Så här använder du det: Du kan definiera en <select> sätt:

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

riktlinje1:

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

Approach2:

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

Observera att genom att använda denna strategi kommer alla definierade "välj" -kontroller för sidan att ärva funktioner hos Select2. Om du bara vill använda Select2 för vissa kontroller hoppar du över detta steg och skriver din egen kod för att använda select2-funktionen direkt och jquery / javascript-funktionen separat för annan valkontroll. Du kan dock använda värdet på manipulerat genom Select2 för Jquery eller vice versa.

Ytterligare exempel på "Grunderna" finns i Select2 GIT-dokumentationen här

Select2 GIT-projektet är här . Gå igenom webbplatsen Select2 Github för detaljerad information om denna produkt.

För att rensa de valda elementen i rullgardinsmenyn Select2.

För att rensa urvalet av de värden som väljs med en Select2 , kan vi använda den tomma () -funktionen.

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

Listrutan kan återställas med Jquery.

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

Det kan också återställas enligt nedan.

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