如何在 Selectize 下拉选项中添加国旗图标（SVG/IMG）

聖光之護 2026-01-21 00:00:00 次阅读

selectize 支持通过自定义 render 函数为每个选项注入 html 内容，因此可在国家选项前动态插入国旗 svg 或 img 标签，实现带图标的下拉选择器。

Selectize 默认仅渲染纯文本选项，但其强大的 render 配置项允许你完全控制选项（option）、选项列表项（item）和下拉菜单（dropdown）的 DOM 结构。要为每个国家选项前置国旗，关键在于重写 option 渲染函数，将或内联

以下是一个完整、可运行的示例（基于 jQuery + Selectize v0.13+）：

$('#country-select').selectize({
  // 启用高亮与搜索（可选）
  highlight: true,
  // 自定义每一项在下拉菜单中的渲染方式
  render: {
    option: function(item, escape) {
      // 假设 flag codes 与 ISO 3166-1 alpha-2 一致，使用 emoji 或 CDN 旗标
      const countryCode = item.value.toUpperCase();
      const flagEmoji = countryCode.length === 2 
        ? String.fromCodePoint(
            ...countryCode.split('').map(c => 127397 + c.charCodeAt(0))
          ) 
        : '?️';

      return `
        ${flagEmoji}
        ${escape(item.text)}
      `;
    },
    // 可选：自定义已选中项的显示（如也带国旗）
    item: function(item, escape) {
      const countryCode = item.value.toUpperCase();
      const flagEmoji = countryCode.length === 2 
        ? String.fromCodePoint(...countryCode.split('').map(c => 127397 + c.charCodeAt(0))) 
        : '?️';
      return `${flagEmoji} ${escape(item.text)}`;
    }
  }
});

配套 CSS（增强可读性与对齐）：

.country-option,
.country-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 14px;
}

.flag {
  margin-right: 8px;
  font-size: 1.2em;
  line-height: 1;
}

/* 可选：为 SVG/IMG 替代方案预留样式 */
.country-option img,
.country-item img {
  width: 18px;
  height: 12px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 2px;
}

⚠️ 注意事项：

Emoji 方案（如上例）简洁轻量，兼容性好（现代浏览器均支持），但部分旧系统可能渲染为方块；
SVG/IMG 方案：可替换 flagEmoji 为，需确保资源路径正确且跨域安全；若用 SVG，推荐内联 Base64 或使用 Flag Icons 等开源库；
render.option 中的 escape() 必须包裹 item.text，防止 XSS；
若数据来自 API，建议在 load 回调中预
处理 flagUrl 字段，再传入 options 数组，使 render 更清晰。