← 全部文章

操作类型

SELECT static vs js：动作栏里的两种下拉变体 —— 何时用哪种

15 5月 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` 是所选选项的 value（没有 value 时为 label）
  document.cookie = `lang=${value}; path=/`;
  location.reload();
  JUSTZIX.log(`语言已切换为 ${value}`);

UI：「🌐 Language」按钮把当前值（例如「Polski」）显示为 label。点击 → 带 4 个选项的下拉 → 点「English」→ cookie + 刷新。memory：下次访问该域名 → 按钮显示「English」（已保留）。

SELECT js —— 第一个动作

使用场景：在一篇长文章里跳到锚点。页面 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` 是所选选项的 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：「📑 章节」按钮 → 页面当前 H2 的下拉 → 点击 → 滚动到那个 H2。列表在页面加载时重新生成 —— 始终最新。

4 种颜色 + 下拉个性化

SELECT 有 4 种颜色 + 2 种用于下拉（static）：

color              → 按钮的背景（和 BUTTON 一样）
colorText          → label（当前值）文字的颜色
colorDropdownBg    → 打开的下拉的背景
colorOption        → 下拉里选项文字的颜色
colorSelected      → 当前所选选项的背景
colorHover         → 鼠标悬停时选项的背景

全部通过 CSS 变量应用（--jz-dropdown-bg、--jz-option-color 等）—— 细粒度的视觉控制。默认我们在浅色页面上用一个深色下拉（对比）。

SELECT js 使用一个原生 <select> 元素 —— 下拉的颜色受限于系统所允许的范围（因 OS 和浏览器而异）。这是个折中：js 变体有动态生成的选项但样式较少，static 变体有完整的视觉控制但需要手动编辑。

使用场景 1 —— 环境切换器（static）

经典：带 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('Label?') || document.title.slice(0, 30);
stored.push({ url: location.href, label });
localStorage.setItem('jz_bookmarks', JSON.stringify(stored));
JUSTZIX.log(`书签已添加: ${label}`);
// SELECT js 在刷新时自动重新渲染，所以 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 —— 高延迟（>500ms）会让按钮闪烁。用一个兜底缓存到 localStorage 里。

使用场景 4 —— 选择一个要执行的动作（static）

超级按钮：带最常见的 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 个下拉而不是 10 个独立按钮 —— 栏更紧凑。折中：多 1 次点击（打开 → 选 vs 单次点击）。

坑

• SELECT static 需要在 options.html 里编辑。动作栏里没有内联编辑。添加一个选项 = 重新打开选项 UI 页面。对于经常变化的列表 → 用 js 变体。
• SELECT js 代码在栏渲染时运行，不只是用户打开下拉时。如果代码慢（fetch 外部 API），按钮会卡住直到 resolve。缓存 + 同步默认值有帮助。
• JZ.click('label') 不会打开 SELECT static 的下拉。它点击按钮元素（切换下拉）。要程序化选择选项：JZ.setValue('label', 'optionValue') —— 自 v2.13.33。
• SELECT js 的 value 总是字符串（原生 <select>）。要数值：在代码里 parseFloat(value)。
• codeOnSelect vs code —— 编辑器里两个不同的字段：code 渲染选项（返回一个数组），codeOnSelect 处理选择（一次性）。别把它们搞混。

接下来做什么

SELECT（static 或 js）是「从众多里选一个」—— BUTTON 之后最灵活的。另见其他动作类型和 API：

• BUTTON —— 触发即忘，最简单的动作
• INPUT —— 单行文本 + 回车→运行
• TEXTAREA —— 多行记事本
• SLIDER —— 原生范围控制器
• TOGGLE3 —— 三态分段控件
• window.JZ + JUSTZIX 辅助函数 —— 程序化 API（SELECT 用 JZ.setValue）

安装 JustZix —— 完全免费，无需账号，没有服务器。