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 为
%7D.svg)
，需确保资源路径正确且跨域安全；若用 SVG，推荐内联 Base64 或使用 Flag Icons 等开源库； - render.option 中的 escape() 必须包裹 item.text，防止 XSS；
- 若数据来自 API，建议在 load 回调中预处理 flagUrl 字段，再传入 options 数组，使 render 更清晰。
通过 render 钩子，Selectize 不仅支持国旗，还可集成图标、状态徽章、描述文字等任意 HTML 结构——真正实现高度定制化的下拉体验。
