如何在select2中加载两个ViewBag列表并通过OptGroup分组显示

Select2 渲染 OptGroup 分组要求数据遵循固定结构：每个分组为一个对象，包含text（分组标题）、children（分组下选项数组，每个选项需包含id/text两个属性，分别对应选项值、选项显示文本），按以下步骤修改即可：

1. 控制器侧兜底处理（避免空值报错） #

先确保控制器传值时不会传递null，给两个列表加空值兜底：

// 控制器赋值代码
ViewBag.ListA = list_a ?? new List<string>();
ViewBag.ListB = list_b ?? new List<string>();

如果你的列表元素是自定义复杂类（比如包含Id、Name属性的实体类），不需要额外转成字符串，直接传递即可。

2. 视图侧替换Select2初始化代码 #

把原来select2初始化的data参数部分替换为如下结构，分组标题可以自行修改为你需要展示的文字：

$("#selectForm").select2({
    data: [
        {
            // 第一个分组的显示标题，可自行修改
            text: "ListA 分组",
            // 序列化ListA为选项数组，如果是复杂对象，把item替换为item.对应属性名即可
            children: @Html.Raw(Json.Encode(ViewBag.ListA.Select(item => new { id = item, text = item })))
        },
        {
            // 第二个分组的显示标题，可自行修改
            text: "ListB 分组",
            // 序列化ListB为选项数组
            children: @Html.Raw(Json.Encode(ViewBag.ListB.Select(item => new { id = item, text = item })))
        }
    ],
    width: '30%',
    allowClear: true,
    placeholder: "Select Form"
});

关键说明 #

• 外层包裹Html.Raw是为了避免Razor引擎将JSON序列化结果中的特殊字符转义，导致JS语法错误
• 你当前使用的空<select>标签不需要手动拼接option或optgroup，Select2会根据传入的data参数自动渲染所有DOM结构
• 如果列表存的是复杂对象，例如List<User>，其中User类有UserId、UserName两个属性，只需要把映射部分改成new { id = item.UserId, text = item.UserName }即可

内容的提问来源于stack exchange，提问作者chucta