本文讲解如何在 Go 模板中结合 Select2 多选下拉框，基于后端传入的字符串切片（[]string）自动匹配并预选对应 <option> 元素，确保页面加载时已正确高亮选中项。
本文讲解如何在 go 模板中结合 select2 多选下拉框，基于后端传入的字符串切片（`[]string`）自动匹配并预选对应 `
要在 Select2 多选组件中实现“自动预选”，关键在于：在 HTML 渲染阶段，就为匹配的 <option> 标签添加 selected 属性。Select2 初始化时会自动识别已标记 selected 的选项，并将其设为默认选中状态——这是最可靠、无需额外 JS 操作的方案。
以下为完整实现步骤与模板写法：
✅ 正确的 Go 模板写法（支持多值匹配）
假设后端传入的数据结构如下：
- .payee: []struct{ Code string } —— 下拉选项数据源；
- .Code: []string —— 需要自动选中的代码列表（例如 ["PAY001", "PAY003"]）。
在模板中，需对每个 <option> 判断其值是否存在于 .Code 切片中。Go 模板原生不支持 in 运算符，因此推荐在后端预处理（如添加布尔字段 Selected bool），或使用自定义模板函数（如 contains）。但若仅用标准语法，可借助嵌套循环模拟判断（适用于小数据量）：
<select id="payee" name="payee" class="select2_multiple form-control" multiple="multiple">
{{range $key, $val := .payee}}
<option value="{{$val.Code}}"
{{range $i, $code := $.Code}}
{{if eq $val.Code $code}}selected="selected"{{end}}
{{end}}
>{{$val.Code}}</option>
{{end}}
</select>⚠️ 注意：$.Code 中的 $ 表示根作用域，避免在 range 内部丢失上下文；value 属性必须显式设置，否则 Select2 可能无法正确识别选中值。
✅ 初始化 Select2（JS 端）
确保在 DOM 加载完成后初始化 Select2，并启用多选模式：
<script>
$(document).ready(function() {
$('#payee').select2({
placeholder: "请选择收款方代码",
allowClear: true,
width: '100%'
});
});
</script>? 注意事项与最佳实践
- 必设 value 属性：即使显示文本与值相同，也应显式声明 value="{{$val.Code}}"，否则部分 Select2 版本可能无法正确同步选中状态。
- 避免重复 selected：模板中每个 <option> 最多只会被标记一次 selected，无需担心冲突。
- 性能提示：若 .Code 切片较大（>100 项），建议改用后端预计算 Selected 字段，而非模板内嵌套循环。
- 验证数据一致性：确保 .payee 中的 Code 与 .Code 中的字符串完全一致（大小写、空格敏感）。
✅ 总结
自动预选 Select2 多选框的核心逻辑不在 JavaScript，而在于服务端渲染时精准注入 selected="selected" 属性。通过 Go 模板的 range 与 eq 判断，即可实现零 JS 依赖的优雅预选。此方案兼容性强、调试直观，是 Go + Select2 场景下的推荐实践。
