Le Champ SELECT2 est le plus grand frère de Select : une liste déroulante dans laquelle vous pouvez saisir, avec un mode multiple en option qui permet à l'utilisateur de choisir plusieurs options à la fois. À l’intérieur des modules complémentaires principaux Constructeur de widgets[TRADUCTION], il couvre mal les cas qu'une liste déroulante native gère Longues listes d'options qui ont besoin d'être recherchées Les choix de type balise où une seule réponse ne suffit pas.
Comme les valeurs habituelles de l'option Sélectionner, Sélectionner2 se branchent directement Conditions pour afficher ou masquer d'autres commandes, et dans le Moteur de modèles de syntaxe Twig pour {% if %} vérifie dans votre balisage Les deux guides couvrent la configuration et les limitations.
Le mode à sélection unique se comporte exactement comme le Sélectionnez champ: votre modèle reçoit une clé. Retournez sur Multiple et la valeur devient un tableau de clés, ce qui change la façon dont votre modèle doit le lire. Ce commutateur est le cœur de ce doc.
Ce que fait le champ Select2 #
- Rend une liste déroulante consultable dans le panneau Élémenteur ; l'utilisateur tape pour filtrer la liste des options.
- Détient une clé parmi vos options définies en mode unique, le même contrat que le simple Select.
- Détient un tableau de clés lorsque l'option Multiple est activée, affichée sous forme de balises amovibles dans le contrôle.
- Alimente les modèles via un jeton ou une boucle: selon ce mode.
- Utilise des paires de touches et d'étiquettes vous définissez, donc les modèles fonctionnent toujours avec des limaces stables.
Si vous débutez dans la création de widgets, commencez par le Aperçu du constructeur de widgets d'abord.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? voir le guide d'installation.
- Un widget personnalisé s'ouvre dans l'éditeur Widget Builder Notre exemple est un widget de carte de portefeuille où les éditeurs marquent chaque instance avec une ou plusieurs catégories : Branding, Web, Print, Motion.
Comment ajouter un champ Select2 #
Trouver Sélectionner2 dans le panneau des champs à gauche de l'éditeur Widget Builder Il se trouve avec les autres champs de choix.
Faites-le glisser dans une section sous le Contenu onglet. Une fois qu'il atterrit, les options du champ s'ouvrent sur la gauche, et la première décision est de savoir si ce contrôle sélectionne une valeur ou plusieurs Réglez cela avant de toucher le modèle, car les deux modes veulent un balisage différent.
Options du champ Select2 expliquées #
- Étiquette: le texte affiché à côté du contrôle dans Elementor, par exemple “Catégories”.
- Nom: l'identifiant unique du champ, des lettres, des chiffres et des soulignements uniquement, par exemple
selected_tags. - Options: les choix comme paires de clés et d'étiquettes Les clés sont les limaces que votre modèle voit (
branding,web) ; les étiquettes sont les mots dans la liste déroulante. - Multiple: le commutateur de mode Désactivé, l'utilisateur choisit une option, La commande accepte plusieurs choix et la valeur devient un tableau de clés.
- Par défaut: la ou les touches sélectionnées lors de la première chute du widget sur une page.
- Description, Afficher l'étiquette, séparateur : les paramètres d'affichage standard, plus les conditions plus basses pour afficher le champ uniquement lorsqu'un autre contrôle a une certaine valeur.
Connectez le Select2 à votre modèle #
En mode unique, traitez-le exactement comme un Select Le jeton imprime la touche choisie, donc les classes de modificateurs et les comparaisons fonctionnent comme d'habitude :
<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}En mode multiple, la valeur est un tableau de cléset une plaine {{ selected_tags }} n'imprime rien d'utile Le modèle doit boucler :
<div class="card-tags">
{% for tag in selected_tags %}
<span class="tag tag--{{ tag }}">{{ tag }}</span>
{% endfor %}
</div>selected_tagsest le Nom du champ.tagest une variable de boucle que vous inventez ; appelez-le n'importe quoi.- Le bloc entre
{% for %}et{% endfor %}imprime une fois par clé choisie, dans l'ordre dans lequel elles ont été sélectionnées.
Attention à la non-concordance de mode Un modèle écrit avec un jeton nu maintient “working” après avoir activé Multiple ; il rend juste un spot vide, aucune erreur, rien dans la console Si une valeur Select2 semble disparaître, vérifiez si Multiple est activé et le modèle attend toujours une seule clé Cette inadéquation est la cause le plus souvent.
Utilisez le contrôle Select2 dans Elementor #
Ajoutez votre widget personnalisé à une page dans Elementor, en rechargeant l'éditeur si la page était déjà ouverte Le contrôle se rend sous forme de liste déroulante avec une zone de recherche Commencez à taper et la liste filtre au fur et à mesure.
Avec Multiple on, chaque choix devient une petite balise à l'intérieur du contrôle, amovible avec son x. Chaque ajout ou suppression rend la boucle, donc les badges sur la carte suivent le contrôle en temps réel.
Cas d'utilisation courants #
- Catégorie et sélecteurs de tags cela restitue les lignes de badge sur les cartes et les éléments du portefeuille.
- Listes d'options longues tels que les choix de pays, d'industrie ou d'appariement de polices où la recherche bat le défilement.
- Listes de contrôle des fonctionnalités où chaque clé choisie imprime une ligne dans une colonne de tarification.
- Widgets de la barre de filtrage dont les clés sélectionnées deviennent des attributs de données pour un script de filtre JS.
- Sélecteurs de profils sociaux où chaque touche correspond à une icône et un lien dans la boucle.
Conseils pour travailler avec le champ Select2 #
- Décidez du mode avant d'écrire le modèle. Le mode unique veut un jeton, le mode multiple veut une boucle ; ils ne sont pas interchangeables.
- N'imprimez jamais directement une valeur multiple.
{{ selected_tags }}sur un tableau ne donne rien d'utile ; seulement le{% for %}loop atteint les clés. - Les clés restent des limaces, les étiquettes restent des mots. La boucle imprime les touches, donc si le texte du badge doit être convivial, rendez les touches présentables ou mappez-les avec
{% if %}blocs à l'intérieur de la boucle. - Une multi-sélection vide boucle zéro fois. Le div d'emballage rend toujours, alors enveloppez-le
{% if selected_tags %}lorsqu'un choix vide ne doit laisser aucune majoration derrière lui. - Utilisez le simple Sélectionner pour les listes courtes. Trois ou quatre variantes fixes n'ont pas besoin d'être recherchées ; Select2 gagne sa place dans des listes plus longues et des multi-picks.
Foire aux questions #
Quel est le champ Select2 dans le Master Addons Widget Builder ?
Le champ Select2 ajoute une liste déroulante consultable à un widget Elementor personnalisé, avec un mode Multiple en option En mode unique votre modèle reçoit une touche option, comme une simple Sélectionner En mode multiple il reçoit un tableau de touches, que vous imprimez avec une {% for %} boucle.
Comment afficher plusieurs valeurs sélectionnées ?
Bouclez le champ : {% for tag in selected_tags %}<span>{{ tag }}</span>{% endfor %}, où selected_tags est le Nom du champ Le bloc rend une fois par clé choisie Un direct {{ selected_tags }} ne fonctionne pas sur le tableau.
Pourquoi mon Select2 n'imprime rien dans le modèle ?
Presque toujours parce que Multiple est activé et que le modèle utilise toujours un jeton nu Un tableau imprimé ne produit directement aucune sortie utile Basculez le modèle sur un {% for %} bouclez ou désactivez le multiple si un choix suffit.
Le modèle reçoit-il des étiquettes ou des clés ?
Clés. Si l'option web porte l'étiquette “Web Design”, la variable de boucle est valable web. Les comparaisons et les noms de classe doivent utiliser la clé, et tout texte d'affichage convivial doit provenir de la clé elle-même ou d'un mappage conditionnel.
Quand dois-je utiliser Select2 au lieu de Select ?
Utilisez Select2 lorsque la liste d'options est suffisamment longue pour que la recherche aide, ou lorsque l'utilisateur doit choisir plus d'une option Pour une courte liste à choix unique, le simple Sélectionnez champ fait le même travail avec un contrôle plus simple.
Puis-je limiter ou prérégler ce qui est choisi ?
L'option Par défaut préréglait la sélection initiale, une clé en mode unique La liste d'options elle-même est la limite : les utilisateurs ne peuvent choisir que parmi les clés que vous avez définies, donc la conservation de cette liste est la façon dont vous gardez la sortie prévisible.
Envelopper #
Le champ Widget Builder Select2 couvre les deux tâches qu'une liste déroulante native ne peut pas : rechercher de longues listes et choisir plusieurs valeurs à la fois Gardez le contrat monomode dans votre tête, une clé via un jeton et passez à un {% for %} bouclez le moment où le multiple continue Pour les choix icônes-boutons plutôt que les déroulages, voir le Choisir champ. Explorez le reste du Widgets et extensions Master Addons& voir le page de tarification pour ce que chaque plan comprend.
