← Wszystkie wpisy

Typy akcji

SELECT static vs js: dwie wariacje dropdownów w pasku akcji — kiedy która

15 maja 2026 · autor JustZix Team

BUTTON to "jedna akcja". TOGGLE3 to "trzy stany". SELECT to "wybierz jedną z N" — gdzie N może być 2, 5, 50, czy dynamiczne. Ale SELECT ma dwie wariacje które wyglądają tak samo, działają inaczej: static (opcje w storage'u, edytowalne przez UI) i js (opcje generowane przez user code, czytanie z DOM strony / fetch z API). Wybór zależy od tego czy lista opcji jest stała czy kontekstowa.

Dwie wariacje — kluczowa różnica

SELECT static — pierwsza akcja

Use case: language switcher dla aplikacji która ma własny i18n.

type: 'select'                  // bez '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` to wybrana wartość z option (lub label gdy brak value)
  document.cookie = `lang=${value}; path=/`;
  location.reload();
  JUSTZIX.log(`Language switched to ${value}`);

UI: button "🌐 Language" pokazuje aktualną wartość (np. "Polski") jako label. Klik → dropdown z 4 opcjami → klik na "English" → cookie + reload. Memory: następna wizyta na domenie → button wyświetla "English" (zachowane).

SELECT js — pierwsza akcja

Use case: skoki do anchor'ów w długim artykule. Dropdown z H2 headings strony.

type: 'select'
variant: 'js'
label: '📑 Sekcje'
code: |
  // Kod runs przy renderze paska. Zwracaj array of {value, label} (lub {value} only).
  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: |
  // Drugi code field — runs po wyborze opcji. `value` to wartość wybranej opcji.
  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: button "📑 Sekcje" → dropdown z aktualnymi H2 strony → klik → scroll do tego H2. Lista regeneruje się gdy strona load'uje — zawsze aktualne.

4 kolory + customizacja dropdown'a

SELECT ma 4 kolory + 2 dla dropdown (static):

color              → background buttona (jak BUTTON)
colorText          → text-color label'a (current value)
colorDropdownBg    → background otwieranego dropdownu
colorOption        → text-color opcji w dropdownie
colorSelected      → background opcji która jest currently selected
colorHover         → background opcji na hover

Wszystkie aplikowane przez CSS variables (--jz-dropdown-bg, --jz-option-color, etc.) — granularna kontrola wizualna. Domyślnie używamy ciemnego dropdownu na light page (kontrast).

SELECT js używa natywnego <select> elementu — kolory dropdownu są limitowane do tego co system pozwala (różne per OS i browser). To trade-off: js variant ma dynamicznie generowane opcje ale mniej styling, static variant ma pełną kontrolę wizualną ale wymaga ręcznej edycji.

Use case 1 — Environment switcher (static)

Klasyk: dropdown z 3-5 środowiskami, kliknięcie → przekierowuje 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}`;

Dla 3 stanów lepszy TOGGLE3 (każdy stan widoczny). Dla 4+ → SELECT static jest najczystszy.

Use case 2 — Bookmarks per domena (js)

Lista "ulubionych" URL'i per domena, z 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;

Drugi BUTTON "+ Bookmark" dodaje aktualny URL do listy:

// Akcja 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(`Bookmark added: ${label}`);
// SELECT js auto-rerenderuje przy reload, więc F5 albo:
JZ.action('Bookmarks')?.click(); // optional refresh
location.reload();

Use case 3 — Pliki z FTP gist'a (js + fetch)

Lista snippet'ów którę chcesz wkleić do pola tekstowego strony, fetched z private 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(`Copied snippet (${value.length} chars)`);

UWAGA: async/await działa w code, ale render czeka na resolve — duża latency (>500ms) sprawia że button miga. Cache localStorage z fallback'iem.

Use case 4 — Wybór akcji do wykonania (static)

Mega-button: dropdown z 10 najczęstszymi flow:

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: |
  // Klasyczny switch — każde value mapuje na 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(`Ran flow: ${value}`);

1 dropdown zamiast 10 oddzielnych buttonów — bardziej kompaktowy pasek. Trade-off: 1 więcej klik (otwórz → wybierz vs jeden klik).

Pułapki

• SELECT static wymaga edycji w options.html. Brak inline-edit w pasku akcji. Dodanie opcji = restart UI options page. Dla często-zmiennej listy → variant js.
• SELECT js code runs PRZY renderze paska, nie tylko gdy user otworzy dropdown. Jeśli code jest slow (fetch zewnętrznego API), button wisi do resolve'a. Cache + sync defaults pomagają.
• JZ.click('label') NIE otwiera dropdown'a SELECT static. Klika sam element przycisku (toggle dropdown). Dla programmatic wyboru opcji: JZ.setValue('label', 'optionValue') — od v2.13.33.
• SELECT js value zawsze string (natywny <select>). Dla number value: parseFloat(value) w code.
• codeOnSelect vs code — dwa różne pola w editor'ze: code renderuje opcje (return array), codeOnSelect handluje wybór (one-off). NIE pomieszać.

Co dalej

SELECT (static lub js) to "wybór jednej z wielu" — najbardziej flexible po BUTTON. Sprawdź też pozostałe typy akcji i API:

• BUTTON — fire-and-forget, najprostsza akcja
• INPUT — single-line text + Enter→run
• TEXTAREA — multi-line scratch pad
• SLIDER — natywny range controller
• TOGGLE3 — 3-stanowe segmented controls
• window.JZ + JUSTZIX helpers — programmatic API (JZ.setValue dla SELECT)

Zainstaluj JustZix — kompletnie za darmo, bez konta, bez serwera.