Select2控件初始化时忽略JS数据，仅识别预定义HTML选项问题

问题出在你的<select>标签是空的（没有任何<option>元素），Select2在初始化多选模式控件时，需要至少一个基础的<option>节点来构建分组选项的DOM结构，空的<select>会导致分组数据无法被正确渲染。而你注释掉的<option value="0">Topic 0</option>刚好提供了这个必要节点，所以启用后就能正常工作。

解决方法（二选一即可） #

方法1：添加隐藏的空<option> #

给<select>添加一个不可见的空选项，既不影响界面，又能满足Select2的DOM结构要求：

<select id="block-permissions" name="permissions" multiple="multiple">
    <option value="" style="display: none;"></option>
</select>

方法2：调整Select2初始化配置（配合空<option>） #

如果不想添加额外的隐藏选项，也可以在初始化时设置占位提示并开启清除功能，同时保留一个空<option>：

$('#block-permissions').select2({
    data: permissions,
    placeholder: "请选择权限",
    allowClear: true
})

对应的HTML：

<select id="block-permissions" name="permissions" multiple="multiple">
    <option value=""></option>
</select>

另外你的JS数据结构是符合Select2要求的，分组的text属性、子选项的id/text/selected属性都无需修改。

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