Select2实现optgroup选项分组：前4项一组其余一组渲染失效问题

• 核心错误出在buildGroup函数的返回值格式不符合Select2的要求：
  1. 你手动拼接了JSON字符串，Select2需要的是原生JavaScript对象数组，不是字符串格式的JSON
  2. 分组的children字段需要传入{id: 选项值, text: 选项展示文本}格式的对象数组，你直接把字符串数组转成了拼接字符串，导致渲染异常

JavaScript 代码 #

let el = document.getElementById('role');

createSelect2("role", 'role', el);

function createSelect2(elementId, elementName, parent) {
  var select = document.createElement('select');
  select.setAttribute('id', elementId);
  select.setAttribute('name', elementName);
  parent.append(select);
  var parameters = {}
  var values = buildGroup();
  parameters.width = '90%';
  parameters.data = values;
  $(select).select2(parameters);
  return select;
}

function buildGroup() {
    let roles = ['role 1', 'role 2', 'role 3', 'role 4', 'role 5', 'role 6', 'role 7', 'role 8', 'role 9', 'role 10', 'role 11', 'role 12', 'role 13', 'role 14', 'role 15']
    // 把普通字符串转成Select2要求的{id, text}格式
    let valuesGroup1 = roles.slice(0,4).map(role => ({id: role, text: role}));
    let valuesGroup2 = roles.slice(4).map(role => ({id: role, text: role}));
    // 直接返回对象数组，不要拼接JSON字符串
    return [
      {text: "Common Groups", children: valuesGroup1},
      {text: "Other Groups", children: valuesGroup2}
    ];
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<div id="role"></div>

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