← Todos los artículos

Tipos de acciones

SELECT static vs js: dos variantes de dropdown en la barra de acciones — cuál cuándo

15 mayo 2026 · por JustZix Team

BUTTON es «una acción». TOGGLE3 es «tres estados». SELECT es «elige una de N» — donde N puede ser 2, 5, 50, o dinámico. Pero SELECT tiene dos variantes que parecen iguales y funcionan de manera distinta: static (opciones en el storage, modificables mediante la UI) y js (opciones generadas por código de usuario, leídas del DOM de la página / recuperadas de una API). La elección depende de si tu lista de opciones es fija o contextual.

Dos variantes — la diferencia clave

SELECT static — primera acción

Caso de uso: switcher de idioma para una app con su propio i18n.

type: 'select'                  // sin '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` es el valor de la opción elegida (o label cuando no hay value)
  document.cookie = `lang=${value}; path=/`;
  location.reload();
  JUSTZIX.log(`Idioma cambiado a ${value}`);

UI: el botón «🌐 Language» muestra el valor actual (p. ej. «Polski») como label. Clic → dropdown con 4 opciones → clic en «English» → cookie + reload. Memory: próxima visita al dominio → el botón muestra «English» (conservado).

SELECT js — primera acción

Caso de uso: saltos a los anchors en un artículo largo. Dropdown de los títulos H2 de la página.

type: 'select'
variant: 'js'
label: '📑 Secciones'
code: |
  // El código corre al render de la barra. Devuelve un array de {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 segundo campo del código — corre tras la elección de la opción. `value` es el valor de la opción elegida.
  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: el botón «📑 Secciones» → dropdown de los H2 actuales de la página → clic → scroll a ese H2. La lista se regenera al cargar la página — siempre actualizada.

4 colores + personalización del dropdown

SELECT tiene 4 colores + 2 para el dropdown (static):

color              → fondo del botón (como BUTTON)
colorText          → color del texto de la label (valor actual)
colorDropdownBg    → fondo del dropdown abierto
colorOption        → color del texto de las opciones en el dropdown
colorSelected      → fondo de la opción actualmente seleccionada
colorHover         → fondo de la opción al pasar el ratón

Todos aplicados mediante variables CSS (--jz-dropdown-bg, --jz-option-color, etc.) — control visual granular. Por defecto usamos un dropdown oscuro sobre una página clara (contraste).

SELECT js usa un elemento <select> nativo — los colores del dropdown están limitados a lo que el sistema permite (varía por SO y navegador). Es un compromiso: la variante js tiene opciones generadas dinámicamente pero menos estilo, la variante static tiene control visual completo pero requiere modificación manual.

Caso de uso 1 — Switcher de entorno (static)

Clásico: dropdown con 3-5 entornos, clic → redirige la 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}`;

Para 3 estados es mejor usar TOGGLE3 (cada estado visible). Para 4+ → SELECT static es el más limpio.

Caso de uso 2 — Marcadores por dominio (js)

Lista de URLs «favoritas» por dominio, en 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 segundo BUTTON «+ Bookmark» añade la URL actual a la lista:

// Acción 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(`Marcador añadido: ${label}`);
// SELECT js se re-renderiza automáticamente al reload, así que F5 o:
JZ.action('Bookmarks')?.click(); // refresh opcional
location.reload();

Caso de uso 3 — Archivos de un gist FTP (js + fetch)

Lista de snippets que quieres pegar en un campo de texto de la página, recuperados de un gist privado:

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

NOTA: async/await funciona en el código, pero el render espera el resolve — una alta latencia (>500ms) hace parpadear el botón. Cachéalo en localStorage con un fallback.

Caso de uso 4 — Elegir una acción que ejecutar (static)

Mega-botón: dropdown con los 10 flujos más comunes:

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 clásico — cada value mapea a un flujo
  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(`Flujo ejecutado: ${value}`);

1 dropdown en lugar de 10 botones separados — barra más compacta. Compromiso: 1 clic de más (abrir → elegir vs un solo clic).

Trampas

• SELECT static requiere modificación en options.html. Sin modificación inline en la barra de acciones. Añadir una opción = reiniciar la página de opciones UI. Para una lista que cambia a menudo → variante js.
• El código SELECT js corre AL render de la barra, no solo cuando el usuario abre el dropdown. Si el código es lento (fetch de API externa), el botón se bloquea hasta el resolve. Cache + default de sync ayudan.
• JZ.click('label') NO abre el dropdown SELECT static. Pulsa el elemento del botón (conmuta el dropdown). Para la elección programática de la opción: JZ.setValue('label', 'optionValue') — desde v2.13.33.
• El value de SELECT js es siempre un string (<select> nativo). Para un valor numérico: parseFloat(value) en el código.
• codeOnSelect vs code — dos campos distintos en el editor: code renderiza las opciones (devuelve un array), codeOnSelect gestiona la selección (puntual). No los confundas.

Qué hacer después

SELECT (static o js) es «elige una de muchas» — el más flexible después de BUTTON. Mira también los demás tipos de acción y la API:

• BUTTON — fire-and-forget, la acción más simple
• INPUT — texto de una línea + Enter→run
• TEXTAREA — bloc de notas multilínea
• SLIDER — controlador de rango nativo
• TOGGLE3 — segmented control de 3 estados
• window.JZ + JUSTZIX helpers — API programática (JZ.setValue para SELECT)

Instala JustZix — completamente gratuito, sin cuenta, sin servidor.