← Tutti gli articoli

Tipi di azioni

SELECT static vs js: due varianti di dropdown nella barra delle azioni — quale quando

15 maggio 2026 · di JustZix Team

BUTTON è «un'azione». TOGGLE3 è «tre stati». SELECT è «scegline una di N» — dove N può essere 2, 5, 50, o dinamico. Ma SELECT ha due varianti che sembrano uguali e funzionano in modo diverso: static (opzioni nello storage, modificabili tramite la UI) e js (opzioni generate da codice utente, lette dal DOM della pagina / recuperate da un'API). La scelta dipende dal fatto che la tua lista di opzioni sia fissa o contestuale.

Due varianti — la differenza chiave

SELECT static — prima azione

Caso d'uso: switcher di lingua per un'app con il proprio i18n.

type: 'select'                  // nessun '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` è il valore dell'opzione scelta (o label quando non c'è value)
  document.cookie = `lang=${value}; path=/`;
  location.reload();
  JUSTZIX.log(`Lingua cambiata in ${value}`);

UI: il pulsante «🌐 Language» mostra il valore attuale (es. «Polski») come label. Clic → dropdown con 4 opzioni → clic su «English» → cookie + reload. Memory: prossima visita al dominio → il pulsante mostra «English» (conservato).

SELECT js — prima azione

Caso d'uso: salti agli anchor in un lungo articolo. Dropdown dei titoli H2 della pagina.

type: 'select'
variant: 'js'
label: '📑 Sezioni'
code: |
  // Il codice gira al render della barra. Restituisci un array di {value, label} (o solo {value}).
  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 secondo campo del codice — gira dopo la scelta dell'opzione. `value` è il valore dell'opzione scelta.
  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: il pulsante «📑 Sezioni» → dropdown degli H2 attuali della pagina → clic → scroll a quell'H2. La lista si rigenera al caricamento della pagina — sempre aggiornata.

4 colori + personalizzazione del dropdown

SELECT ha 4 colori + 2 per il dropdown (static):

color              → sfondo del pulsante (come BUTTON)
colorText          → colore del testo della label (valore attuale)
colorDropdownBg    → sfondo del dropdown aperto
colorOption        → colore del testo delle opzioni nel dropdown
colorSelected      → sfondo dell'opzione attualmente selezionata
colorHover         → sfondo dell'opzione al passaggio del mouse

Tutti applicati tramite variabili CSS (--jz-dropdown-bg, --jz-option-color, ecc.) — controllo visivo granulare. Di default usiamo un dropdown scuro su una pagina chiara (contrasto).

SELECT js usa un elemento <select> nativo — i colori del dropdown sono limitati a ciò che il sistema permette (varia per OS e browser). È un compromesso: la variante js ha opzioni generate dinamicamente ma meno stile, la variante static ha pieno controllo visivo ma richiede modifica manuale.

Caso d'uso 1 — Switcher di ambiente (static)

Classico: dropdown con 3-5 ambienti, clic → reindirizza 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}`;

Per 3 stati è meglio usare TOGGLE3 (ogni stato visibile). Per 4+ → SELECT static è il più pulito.

Caso d'uso 2 — Segnalibri per dominio (js)

Lista di URL «preferiti» per dominio, in 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 secondo BUTTON «+ Bookmark» aggiunge l'URL attuale alla lista:

// Azione 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(`Segnalibro aggiunto: ${label}`);
// SELECT js si re-renderizza automaticamente al reload, quindi F5 o:
JZ.action('Bookmarks')?.click(); // refresh opzionale
location.reload();

Caso d'uso 3 — File da un gist FTP (js + fetch)

Lista di snippet che vuoi incollare in un campo di testo della pagina, recuperati da un gist privato:

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 copiato (${value.length} caratteri)`);

NOTA: async/await funziona nel codice, ma il render aspetta il resolve — un'alta latenza (>500ms) fa lampeggiare il pulsante. Metti in cache in localStorage con un fallback.

Caso d'uso 4 — Scegliere un'azione da eseguire (static)

Mega-pulsante: dropdown con i 10 flussi più comuni:

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 classico — ogni value mappa su un flusso
  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(`Flusso eseguito: ${value}`);

1 dropdown invece di 10 pulsanti separati — barra più compatta. Compromesso: 1 clic in più (apri → scegli vs un solo clic).

Trappole

• SELECT static richiede modifica in options.html. Nessuna modifica inline nella barra delle azioni. Aggiungere un'opzione = riavviare la pagina delle opzioni UI. Per una lista che cambia spesso → variante js.
• Il codice SELECT js gira AL render della barra, non solo quando l'utente apre il dropdown. Se il codice è lento (fetch di API esterna), il pulsante si blocca fino al resolve. Cache + default di sync aiutano.
• JZ.click('label') NON apre il dropdown SELECT static. Clicca l'elemento del pulsante (commuta il dropdown). Per la scelta programmatica dell'opzione: JZ.setValue('label', 'optionValue') — da v2.13.33.
• Il value di SELECT js è sempre una stringa (<select> nativo). Per un valore numerico: parseFloat(value) nel codice.
• codeOnSelect vs code — due campi diversi nell'editor: code renderizza le opzioni (restituisce un array), codeOnSelect gestisce la selezione (una tantum). Non confonderli.

Cosa fare dopo

SELECT (static o js) è «scegline una di tante» — il più flessibile dopo BUTTON. Vedi anche gli altri tipi di azione e l'API:

• BUTTON — fire-and-forget, l'azione più semplice
• INPUT — testo a riga singola + Invio→run
• TEXTAREA — blocco note multi-riga
• SLIDER — controller di range nativo
• TOGGLE3 — segmented control a 3 stati
• window.JZ + JUSTZIX helpers — API programmatica (JZ.setValue per SELECT)

Installa JustZix — completamente gratuito, senza account, senza server.