如何在 Select2 多选组件中基于 Go 模板自动预选匹配项-Golang-PHP中文网

本文介绍如何在 Go 模板中结合 Select2 多选下拉框，根据后端传入的字符串切片（[]string）自动选中对应元素，实现服务端驱动的初始选中状态。

本文介绍如何在 go 模板中结合 select2 多选下拉框，根据后端传入的字符串切片（`[]string`）自动选中对应 `

要在 Select2 多选组件中实现“自动预选”，关键在于：在 HTML 渲染阶段，就为匹配的 。Select2 初始化时会自动识别已带 selected 属性的选项，并将其设为默认选中状态（无需额外 JavaScript 触发）。

✅ 正确做法：在 Go 模板中动态添加 selected

假设后端结构体传递了两个字段：

.payee: 类型为 []struct{ Code string }，用于生成所有可选项；
.Code: 类型为 []string，表示需要预先选中的代码列表（例如 ["PAY001", "PAY003"]）。

你不能直接用 {{if .Code}} 判断整个切片（这只会恒为 true），而应逐个比对每个 $val.Code 是否存在于 .Code 切片中。Go 模板原生不支持 in 运算符，因此需借助自定义模板函数（推荐）或在后端预处理数据（更简洁可靠）。

✅ 推荐方案：后端预处理（推荐 ✅）

在 Go 后端（如 handler 中）提前标记是否选中：

// 假设 payeeList = []Payee{{Code:"PAY001"}, {Code:"PAY002"}, ...}
// selectedCodes = []string{"PAY001", "PAY003"}

var payeeWithSelected = make([]struct {
    Code      string
    Selected  bool
}, 0, len(payeeList))

for _, p := range payeeList {
    isSelected := false
    for _, c := range selectedCodes {
        if c == p.Code {
            isSelected = true
            break
        }
    }
    payeeWithSelected = append(payeeWithSelected, struct {
        Code     string
        Selected bool
    }{Code: p.Code, Selected: isSelected})
}

data := map[string]interface{}{
    "payee": payeeWithSelected,
}

模板中即可简洁渲染：

讯飞听见会议

讯飞听见会议是一款由科大讯飞推出的 AI 云视频会议与语音转写协作平台。

下载

<select id="payee" name="payee" class="select2_multiple form-control" multiple>
{{range .payee}}
    <option value="{{.Code}}" .selected>{{.Code}}</option>
{{end}}
</select>

⚠️ 注意：务必为

❌ 不推荐：纯模板内遍历判断（不可行）

Go 模板不支持嵌套循环或切片查找，以下写法无效：

{{if in $.Code $val.Code}} <!-- ❌ 'in' 函数不存在 -->

若强行实现，需注册自定义函数（如 funcIn），但增加复杂度且影响可维护性，不建议。

? 初始化 Select2（前端）

确保在 DOM 加载完成后初始化多选模式：

<script>
$(document).ready(function() {
    $('#payee').select2({
        placeholder: "Select payee codes...",
        allowClear: true
    });
});
</script>