jquery-select2Démarrer avec jquery-select2


Remarques

Cette section fournit une vue d'ensemble de ce que jquery-select2 est et pourquoi un développeur peut vouloir l'utiliser.

Il devrait également mentionner tous les grands sujets dans jquery-select2, et établir un lien avec les sujets connexes. La documentation de jquery-select2 étant nouvelle, vous devrez peut-être créer des versions initiales de ces rubriques connexes.

Versions

Version Notes de version Lien Date de sortie
4.0.3 (actuel) Sélectionnez2 4.0.3 2016-05-27
4.0.2 Sélectionnez2 4.0.2 2016-03-09
4.0.2 RC1 Sélectionnez2 4.0.2-rc1 2016-02-14
4.0.1 Sélectionnez2 4.0.1 2015-11-27
4.0.1 RC1 Select2 4.0.1-rc1 2015-11-10
3.5.4 Select2 3.5.4 2015-08-30
3.5.3 Select2 3.5.3 2015-08-20
** Les anciennes versions peuvent être trouvées à: select2 / releases 2015-08-20

Jquery - Installation et configuration de Select2

Vous pouvez inclure / installer Select2 de l'une des deux manières suivantes:

  1. Utiliser directement les CDN dans votre projet sous la section principale de votre projet.

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. Téléchargez le code sur votre ordinateur local et incluez-le dans votre projet. ça devrait ressembler à ça entrer la description de l'image ici

Puis inclure ces lignes dans la section principale de votre page HTML

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

Remarque: Jquery doit être inclus dans votre projet pour que Select2 fonctionne correctement.

PITFALL: si la version actuelle de jquery et Select2 sont en conflit ou si les fonctionnalités de Select2 ne fonctionnent pas. Ensuite, déplacez les variables et les implémentations select2 dans un bloc séparé du corps du document $ (document) .ready (function () {// votre code select2 .....});

Comment l'utiliser: Vous pouvez définir un <select> comme suit:

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

Approche1:

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

Approche2:

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

S'il vous plaît noter que l'utilisation de cette approche tout le contrôle "select" défini de la page héritera des fonctionnalités de Select2. Si vous souhaitez uniquement utiliser Select2 pour certaines commandes, ignorez cette étape et écrivez votre propre code pour utiliser la fonctionnalité select2 directement et la fonctionnalité jquery / javascript séparément pour les autres contrôles de sélection. Cependant, vous pouvez utiliser la valeur de manipulé via Select2 pour Jquery ou vice-versa.

Vous trouverez d'autres exemples de «The Basics» dans la documentation Select2 GIT ici

Le projet Select2 GIT est ici . Veuillez parcourir le site Select2 Github pour plus de détails sur ce produit.

Pour effacer les éléments sélectionnés de la liste déroulante Select2.

Pour effacer la sélection des valeurs sélectionnées à l'aide du Select2 déroulant Select2 , nous pouvons utiliser la fonction empty ().

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

Le menu déroulant peut être réinitialisé à l'aide de Jquery.

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

Il peut également être réinitialisé comme ci-dessous.

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