← Все статьи

Типы действий

SELECT static vs js: два варианта dropdown на панели действий — какой когда

15 мая 2026 · автор JustZix Team

BUTTON — это «одно действие». TOGGLE3 — это «три состояния». SELECT — это «выбери один из N» — где N может быть 2, 5, 50 или динамическим. Но у SELECT два варианта, которые выглядят одинаково и работают по-разному: static (опции в хранилище, редактируемые через UI) и js (опции, генерируемые пользовательским кодом, читаемые из DOM страницы / получаемые из API). Выбор зависит от того, фиксированный твой список опций или контекстный.

Два варианта — ключевая разница

SELECT static — первое действие

Сценарий: переключатель языка для приложения со своим i18n.

type: 'select'                  // нет '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` — это значение выбранной опции (или label, когда нет value)
  document.cookie = `lang=${value}; path=/`;
  location.reload();
  JUSTZIX.log(`Язык изменён на ${value}`);

UI: кнопка «🌐 Language» показывает текущее значение (например, «Polski») как метку. Клик → dropdown с 4 опциями → клик на «English» → cookie + reload. Memory: следующий визит на домен → кнопка показывает «English» (сохранено).

SELECT js — первое действие

Сценарий: переходы к якорям в длинной статье. Dropdown заголовков H2 страницы.

type: 'select'
variant: 'js'
label: '📑 Разделы'
code: |
  // Код запускается при рендере панели. Верни массив {value, label} (или просто {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: |
  // Второе поле кода — запускается после выбора опции. `value` — значение выбранной опции.
  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: кнопка «📑 Разделы» → dropdown текущих H2 страницы → клик → прокрутка к этому H2. Список регенерируется при загрузке страницы — всегда актуален.

4 цвета + кастомизация dropdown

У SELECT 4 цвета + 2 для dropdown (static):

color              → фон кнопки (как BUTTON)
colorText          → цвет текста метки (текущее значение)
colorDropdownBg    → фон открытого dropdown
colorOption        → цвет текста опций в dropdown
colorSelected      → фон текущей выбранной опции
colorHover         → фон опции при наведении мыши

Все применяются через CSS-переменные (--jz-dropdown-bg, --jz-option-color и т.д.) — гранулярный визуальный контроль. По умолчанию мы используем тёмный dropdown на светлой странице (контраст).

SELECT js использует нативный элемент <select> — цвета dropdown ограничены тем, что разрешает система (варьируется по ОС и браузеру). Это компромисс: js-вариант имеет динамически генерируемые опции, но меньше стиля, static-вариант имеет полный визуальный контроль, но требует ручного редактирования.

Сценарий 1 — переключатель окружений (static)

Классика: dropdown с 3-5 окружениями, клик → редирект 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}`;

Для 3 состояний лучше использовать TOGGLE3 (каждое состояние видно). Для 4+ → SELECT static самый чистый.

Сценарий 2 — закладки по доменам (js)

Список «избранных» URL по доменам, в 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;

Вторая BUTTON «+ Bookmark» добавляет текущий URL в список:

// Действие BUTTON
const stored = JSON.parse(localStorage.getItem('jz_bookmarks') || '[]');
const label = prompt('Метка?') || document.title.slice(0, 30);
stored.push({ url: location.href, label });
localStorage.setItem('jz_bookmarks', JSON.stringify(stored));
JUSTZIX.log(`Закладка добавлена: ${label}`);
// SELECT js ре-рендерится автоматически при reload, поэтому F5 или:
JZ.action('Bookmarks')?.click(); // необязательное обновление
location.reload();

Сценарий 3 — файлы из FTP-gist (js + fetch)

Список сниппетов, которые ты хочешь вставлять в текстовое поле страницы, получаемых из приватного 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(`Сниппет скопирован (${value.length} символов)`);

ПРИМЕЧАНИЕ: async/await работает в коде, но рендер ждёт resolve — высокая задержка (>500мс) заставляет кнопку мигать. Кэшируй в localStorage с фолбэком.

Сценарий 4 — выбор действия для выполнения (static)

Мега-кнопка: dropdown с 10 самыми частыми потоками:

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 — каждый value мапится на поток
  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(`Поток выполнен: ${value}`);

1 dropdown вместо 10 отдельных кнопок — панель компактнее. Компромисс: 1 лишний клик (открой → выбери vs один клик).

Ловушки

• SELECT static требует редактирования в options.html. Никакого inline-редактирования на панели действий. Добавить опцию = перезапустить UI страницы опций. Для часто меняющегося списка → js-вариант.
• Код SELECT js запускается ПРИ рендере панели, не только когда пользователь открывает dropdown. Если код медленный (fetch внешнего API), кнопка зависает до resolve. Кэш + sync-дефолт помогают.
• JZ.click('label') НЕ открывает dropdown SELECT static. Кликает элемент кнопки (переключает dropdown). Для программного выбора опции: JZ.setValue('label', 'optionValue') — с v2.13.33.
• value у SELECT js всегда строка (нативный <select>). Для числового значения: parseFloat(value) в коде.
• codeOnSelect vs code — два разных поля в редакторе: code рендерит опции (возвращает массив), codeOnSelect обрабатывает выбор (разово). Не путай их.

Что делать дальше

SELECT (static или js) — это «выбери один из многих» — самый гибкий после BUTTON. Смотри также другие типы действий и API:

• BUTTON — fire-and-forget, самое простое действие
• INPUT — однострочный текст + Enter→run
• TEXTAREA — многострочный блокнот
• SLIDER — нативный контроллер диапазона
• TOGGLE3 — трёхпозиционный сегментированный контрол
• window.JZ + JUSTZIX helpers — программный API (JZ.setValue для SELECT)

Установи JustZix — полностью бесплатно, без аккаунта, без сервера.