← Tous les articles

Types d'actions

SELECT static vs js : deux variantes de dropdown dans la barre d'actions — laquelle quand

15 mai 2026 · par JustZix Team

BUTTON est « une action ». TOGGLE3 est « trois états ». SELECT est « choisir une de N » — où N peut être 2, 5, 50, ou dynamique. Mais SELECT a deux variantes qui se ressemblent et fonctionnent différemment : static (options dans le stockage, éditables via l'UI) et js (options générées par du code utilisateur, lues depuis le DOM de la page / récupérées d'une API). Le choix dépend de si votre liste d'options est fixe ou contextuelle.

Deux variantes — la différence clé

SELECT static — première action

Cas d'usage : commutateur de langue pour une app avec son propre i18n.

type: 'select'                  // pas de 'variant' = static
label: '🌐 Language'
options: [
  { id: 'pl', label: 'Polski',   value: 'pl' },
  { id: 'en', label: 'English',  value: 'en' },
  { id: 'de', label: 'Deutsch',  value: 'de' },
  { id: 'fr', label: 'Français', value: 'fr' },
]
code: |
  // `value` est la valeur de l'option choisie (ou le label quand pas de value)
  document.cookie = `lang=${value}; path=/`;
  location.reload();
  JUSTZIX.log(`Langue changée en ${value}`);

UI : le bouton « 🌐 Language » affiche la valeur actuelle (p. ex. « Polski ») comme label. Clic → dropdown de 4 options → clic sur « English » → cookie + reload. Mémoire : prochaine visite du domaine → le bouton affiche « English » (conservé).

SELECT js — première action

Cas d'usage : sauts vers les ancres dans un long article. Dropdown des titres H2 de la page.

type: 'select'
variant: 'js'
label: '📑 Sections'
code: |
  // Le code s'exécute au rendu de la barre. Retournez un tableau de {value, label} (ou {value} seul).
  return Array.from(document.querySelectorAll('h2')).map(h => ({
    value: h.id || h.textContent.trim().slice(0, 40),
    label: h.textContent.trim().slice(0, 40),
  }));
codeOnSelect: |
  // Un second champ code — s'exécute après le choix de l'option. `value` est la valeur de l'option choisie.
  const target = document.getElementById(value)
    || Array.from(document.querySelectorAll('h2')).find(h => h.textContent.includes(value));
  if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });

UI : le bouton « 📑 Sections » → dropdown des H2 actuels de la page → clic → scroll vers ce H2. La liste se régénère au chargement de la page — toujours à jour.

4 couleurs + personnalisation du dropdown

SELECT a 4 couleurs + 2 pour le dropdown (static) :

color              → fond du bouton (comme BUTTON)
colorText          → couleur du texte du label (valeur actuelle)
colorDropdownBg    → fond du dropdown ouvert
colorOption        → couleur du texte des options dans le dropdown
colorSelected      → fond de l'option actuellement sélectionnée
colorHover         → fond de l'option au survol

Toutes appliquées via des variables CSS (--jz-dropdown-bg, --jz-option-color, etc.) — contrôle visuel granulaire. Par défaut, on utilise un dropdown sombre sur une page claire (contraste).

SELECT js utilise un élément <select> natif — les couleurs du dropdown sont limitées à ce que le système permet (varie selon l'OS et le navigateur). C'est un compromis : la variante js a des options générées dynamiquement mais moins de stylisation, la variante static a un contrôle visuel complet mais nécessite une édition manuelle.

Cas d'usage 1 — Commutateur d'environnement (static)

Classique : dropdown avec 3-5 environnements, clic → redirige l'URL.

options: [
  { id: 'dev',  label: '🟢 DEV',   value: 'dev.app.com' },
  { id: 'stg',  label: '🟡 STG',   value: 'staging.app.com' },
  { id: 'prod', label: '🔴 PROD',  value: 'app.com' },
]
code: |
  const path = location.pathname + location.search;
  location.href = `https://${value}${path}`;

Pour 3 états, mieux vaut utiliser TOGGLE3 (chaque état visible). Pour 4+ → SELECT static est le plus propre.

Cas d'usage 2 — Marque-pages par domaine (js)

Liste d'URLs « favorites » par domaine, dans localStorage :

variant: 'js'
label: '⭐ Bookmarks'
code: |
  const stored = JSON.parse(localStorage.getItem('jz_bookmarks') || '[]');
  return stored.map(b => ({ value: b.url, label: b.label }));
codeOnSelect: |
  window.location.href = value;

Un second BUTTON « + Bookmark » ajoute l'URL actuelle à la liste :

// Action BUTTON
const stored = JSON.parse(localStorage.getItem('jz_bookmarks') || '[]');
const label = prompt('Label ?') || document.title.slice(0, 30);
stored.push({ url: location.href, label });
localStorage.setItem('jz_bookmarks', JSON.stringify(stored));
JUSTZIX.log(`Marque-page ajouté : ${label}`);
// SELECT js se re-render automatiquement au reload, donc F5 ou :
JZ.action('Bookmarks')?.click(); // refresh optionnel
location.reload();

Cas d'usage 3 — Fichiers depuis un gist FTP (js + fetch)

Liste de snippets que vous voulez coller dans un champ texte de la page, récupérés depuis un gist privé :

variant: 'js'
label: '📋 Snippets'
code: |
  const r = await fetch('https://gist.githubusercontent.com/.../snippets.json');
  if (!r.ok) return [];
  const snippets = await r.json();
  return snippets.map(s => ({ value: s.content, label: s.name }));
codeOnSelect: |
  navigator.clipboard.writeText(value);
  JUSTZIX.log(`Snippet copié (${value.length} caractères)`);

NOTE : async/await fonctionne dans le code, mais le rendu attend la résolution — une latence élevée (>500ms) fait clignoter le bouton. Mettez en cache dans localStorage avec un fallback.

Cas d'usage 4 — Choisir une action à exécuter (static)

Méga-bouton : dropdown avec les 10 flux les plus courants :

options: [
  { id: 'login',    label: '🔑 Login as test',  value: 'login' },
  { id: 'addCart',  label: '🛒 Add 3 items',    value: 'addCart' },
  { id: 'checkout', label: '✅ Quick checkout', value: 'checkout' },
  ...
]
code: |
  // switch classique — chaque value mappe sur un flux
  switch (value) {
    case 'login':
      JZ.click('Login');
      break;
    case 'addCart':
      ['p1','p2','p3'].forEach(id =>
        document.querySelector(`[data-product=${id}] .add`)?.click()
      );
      break;
    case 'checkout':
      JZ.click('Checkout');
      break;
  }
  JUSTZIX.log(`Flux exécuté : ${value}`);

1 dropdown au lieu de 10 boutons séparés — barre plus compacte. Compromis : 1 clic de plus (ouvrir → choisir vs un seul clic).

Pièges

• SELECT static nécessite une édition dans options.html. Pas d'édition inline dans la barre d'actions. Ajouter une option = redémarrer la page d'options UI. Pour une liste qui change souvent → variante js.
• Le code SELECT js s'exécute AU rendu de la barre, pas seulement quand l'utilisateur ouvre le dropdown. Si le code est lent (fetch d'API externe), le bouton se fige jusqu'à la résolution. Le cache + les défauts de sync aident.
• JZ.click('label') N'OUVRE PAS le dropdown SELECT static. Il clique l'élément du bouton (bascule le dropdown). Pour un choix d'option programmatique : JZ.setValue('label', 'optionValue') — depuis v2.13.33.
• La valeur SELECT js est toujours une string (<select> natif). Pour une valeur numérique : parseFloat(value) dans le code.
• codeOnSelect vs code — deux champs d'éditeur différents : code rend les options (retourne un tableau), codeOnSelect gère la sélection (ponctuel). Ne les confondez pas.

La suite

SELECT (static ou js) est « choisir une parmi plusieurs » — le plus flexible après BUTTON. Voyez aussi les autres types d'actions et l'API :

• BUTTON — fire-and-forget, l'action la plus simple
• INPUT — texte sur une ligne + Entrée→run
• TEXTAREA — bloc-notes multi-lignes
• SLIDER — contrôleur de plage natif
• TOGGLE3 — segmented controls à 3 états
• window.JZ + JUSTZIX helpers — API programmatique (JZ.setValue pour SELECT)

Installez JustZix — entièrement gratuit, sans compte, sans serveur.