← Alle Beiträge

Aktionstypen

SELECT static vs js: zwei Dropdown-Varianten in der Aktionsleiste — wann welche

15 Mai 2026 · von JustZix Team

BUTTON ist „eine Aktion". TOGGLE3 ist „drei Zustände". SELECT ist „eine von N wählen" — wobei N 2, 5, 50 oder dynamisch sein kann. Aber SELECT hat zwei Varianten, die gleich aussehen und unterschiedlich funktionieren: static (Optionen im Speicher, über die UI editierbar) und js (Optionen von Usercode generiert, gelesen aus dem Seiten-DOM / von einer API geholt). Die Wahl hängt davon ab, ob deine Optionsliste fest oder kontextabhängig ist.

Zwei Varianten — der entscheidende Unterschied

SELECT static — erste Aktion

Anwendungsfall: Sprachumschalter für eine App mit eigenem i18n.

type: 'select'                  // kein '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` ist der Wert der gewählten Option (oder label, wenn kein value)
  document.cookie = `lang=${value}; path=/`;
  location.reload();
  JUSTZIX.log(`Sprache gewechselt zu ${value}`);

UI: Der Button „🌐 Language" zeigt den aktuellen Wert (z. B. „Polski") als Label. Klick → Dropdown mit 4 Optionen → Klick auf „English" → Cookie + Reload. Memory: nächster Besuch der Domain → der Button zeigt „English" (erhalten).

SELECT js — erste Aktion

Anwendungsfall: Sprünge zu Ankern in einem langen Artikel. Dropdown der H2-Überschriften der Seite.

type: 'select'
variant: 'js'
label: '📑 Abschnitte'
code: |
  // Der Code läuft beim Rendern der Leiste. Gib ein Array von {value, label} zurück (oder nur {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: |
  // Ein zweites Code-Feld — läuft nach der Optionswahl. `value` ist der Wert der gewählten Option.
  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: Der Button „📑 Abschnitte" → Dropdown der aktuellen H2s der Seite → Klick → Scroll zu diesem H2. Die Liste regeneriert sich beim Seitenladen — immer aktuell.

4 Farben + Dropdown-Anpassung

SELECT hat 4 Farben + 2 für das Dropdown (static):

color              → Button-Hintergrund (wie BUTTON)
colorText          → Label-Textfarbe (aktueller Wert)
colorDropdownBg    → Hintergrund des geöffneten Dropdowns
colorOption        → Option-Textfarbe im Dropdown
colorSelected      → Hintergrund der aktuell gewählten Option
colorHover         → Option-Hintergrund bei Hover

Alle angewendet über CSS-Variablen (--jz-dropdown-bg, --jz-option-color usw.) — granulare visuelle Kontrolle. Standardmäßig nutzen wir ein dunkles Dropdown auf einer hellen Seite (Kontrast).

SELECT js nutzt ein natives <select>-Element — die Dropdown-Farben sind auf das beschränkt, was das System erlaubt (variiert je nach OS und Browser). Ein Trade-off: die js-Variante hat dynamisch generierte Optionen, aber weniger Styling, die static-Variante hat volle visuelle Kontrolle, erfordert aber manuelle Bearbeitung.

Anwendungsfall 1 — Umgebungsumschalter (static)

Klassiker: Dropdown mit 3-5 Umgebungen, Klick → leitet die URL um.

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}`;

Für 3 Zustände nutze besser TOGGLE3 (jeder Zustand sichtbar). Für 4+ → SELECT static ist am saubersten.

Anwendungsfall 2 — Lesezeichen pro Domain (js)

Liste von „Favoriten"-URLs pro Domain, im 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;

Ein zweiter BUTTON „+ Bookmark" fügt die aktuelle URL zur Liste hinzu:

// BUTTON-Aktion
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(`Lesezeichen hinzugefügt: ${label}`);
// SELECT js rendert beim Reload automatisch neu, also F5 oder:
JZ.action('Bookmarks')?.click(); // optionales Refresh
location.reload();

Anwendungsfall 3 — Dateien aus einem FTP-Gist (js + fetch)

Liste von Snippets, die du in ein Textfeld der Seite einfügen willst, geholt aus einem privaten Gist:

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

HINWEIS: async/await funktioniert im Code, aber das Rendering wartet auf das Resolve — hohe Latenz (>500ms) lässt den Button flackern. Cache im localStorage mit Fallback.

Anwendungsfall 4 — Eine auszuführende Aktion wählen (static)

Mega-Button: Dropdown mit den 10 häufigsten Flows:

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: |
  // Klassischer switch — jeder value mappt auf einen Flow
  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(`Flow ausgeführt: ${value}`);

1 Dropdown statt 10 separater Buttons — kompaktere Leiste. Trade-off: 1 Klick mehr (öffnen → wählen vs. ein Klick).

Fallstricke

• SELECT static erfordert Bearbeitung in options.html. Kein Inline-Edit in der Aktionsleiste. Eine Option hinzufügen = die UI-Optionsseite neu starten. Für eine sich häufig ändernde Liste → js-Variante.
• SELECT-js-Code läuft BEIM Rendern der Leiste, nicht erst, wenn der User das Dropdown öffnet. Wenn der Code langsam ist (externer API-fetch), hängt der Button bis zum Resolve. Cache + Sync-Defaults helfen.
• JZ.click('label') öffnet NICHT das static-SELECT-Dropdown. Es klickt das Button-Element (schaltet das Dropdown um). Für programmatische Optionswahl: JZ.setValue('label', 'optionValue') — seit v2.13.33.
• SELECT-js-value ist immer ein String (natives <select>). Für einen Zahlenwert: parseFloat(value) im Code.
• codeOnSelect vs code — zwei verschiedene Editor-Felder: code rendert die Optionen (Array zurückgeben), codeOnSelect behandelt die Wahl (einmalig). Nicht verwechseln.

Wie es weitergeht

SELECT (static oder js) ist „eine von vielen wählen" — am flexibelsten nach BUTTON. Sieh dir auch die anderen Aktionstypen und die API an:

• BUTTON — Fire-and-forget, die einfachste Aktion
• INPUT — einzeiliger Text + Enter→Run
• TEXTAREA — mehrzeiliger Notizblock
• SLIDER — nativer Range-Controller
• TOGGLE3 — 3-Zustands-Segmented-Controls
• window.JZ + JUSTZIX helpers — programmatische API (JZ.setValue für SELECT)

Installiere JustZix — komplett kostenlos, kein Konto, kein Server.