jquery-select2Rozpoczęcie pracy z jquery-select2


Uwagi

Ta sekcja zawiera przegląd tego, czym jest jquery-select2 i dlaczego deweloper może chcieć go użyć.

Powinien również wymieniać wszelkie duże tematy w jquery-select2 i zawierać linki do powiązanych tematów. Ponieważ Dokumentacja dla jquery-select2 jest nowa, może być konieczne utworzenie początkowych wersji tych pokrewnych tematów.

Wersje

Wersja Link do informacji o wersji Data wydania
4.0.3 (bieżący) Wybierz2 4.0.3 27.05.2016
4.0.2 Wybierz2 4.0.2 2016-03-09
4.0.2 RC1 Wybierz2 4.0.2-rc1 14.02.2016
4.0.1 Wybierz2 4.0.1 27.11.2015
4.0.1 RC1 Wybierz2 4.0.1-rc1 2015-11-10
3.5.4 Wybierz2 3.5.4 30.08.2015
3.5.3 Wybierz2 3.5.3 2015-08-20
** Starsze wersje można znaleźć na: select2 / releases 2015-08-20

Jquery - Wybierz 2 Instalacja i konfiguracja

Możesz dołączyć / zainstalować Select2 na jeden z dwóch sposobów

  1. Bezpośrednio za pomocą CDN w projekcie w części głównej projektu.

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. Pobierz kod na komputer lokalny i dołącz go do swojego projektu. To powinno wyglądać tak wprowadź opis zdjęcia tutaj

Następnie dołącz te wiersze do sekcji nagłówka strony HTML

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

Uwaga: Aby Select2 działało poprawnie, musisz włączyć Jquery do swojego projektu.

PITFALL: jeśli bieżąca wersja jquery i Select2 są w konflikcie lub funkcje Select2 nie działają. Następnie przenieś zmienne select2 i implementacje do osobnego bloku treści dokumentu $ (dokument) .ready (function () {// twój kod select2 .....});

Jak tego używać: Możesz zdefiniować <select> w następujący sposób:

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

Podejście 1:

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

Podejście 2:

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

Należy pamiętać, że przy takim podejściu cała zdefiniowana kontrola „select” strony odziedziczy funkcje Select2. Jeśli chcesz używać Select2 tylko do niektórych kontrolek, pomiń ten krok i napisz własny kod, aby użyć funkcji select2 bezpośrednio i funkcji jquery / javascript osobno dla innej kontroli select. Można jednak użyć wartości zmanipulowanej przez Select2 dla Jquery lub odwrotnie.

Dalsze przykłady „Podstawy” można znaleźć w dokumentacji Select2 GIT tutaj

Projekt Select2 GIT jest tutaj . Przejdź do strony Select2 Github, aby uzyskać szczegółowe informacje na temat tego produktu.

Aby wyczyścić wybrane elementy listy rozwijanej Select2.

Aby wyczyścić zaznaczenie tych wartości, które są wybrane za pomocą rozwijanej listy Select2 , możemy użyć funkcji empty ().

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

Lista rozwijana może być zresetowana za pomocą Jquery.

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

Można go również zresetować jak poniżej.

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