select2 中的组值

Question

Usecase：我正在尝试对 select2 中的值进行分组。例如：前 4 个值应该放在一组中，其他值应该放在第二组中。我所说的分组是指 <optgroup> 标签。

代码:

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',]
    let valuesGroup1 = [roles[0], roles[1], roles[2], roles[3]];
    let valuesGroup2 = [];
    for (index = 4; index < roles.length; index++) {
        valuesGroup2.push(roles[index]);
    }
    let group1Obj = ['{"text" : "Common Groups", "children" : "' + valuesGroup1 + '"}', '{"text" : "Other Groups", "children" : "' + valuesGroup2 + '"}'];
    return group1Obj;
}

<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>
<div id="role">
</div>

问题：它没有按组呈现数据。相反，它连接数据并仅显示两个值。

我指的是这个：https://select2.org/data-sources/formats#grouped-data

这是 jsFiddle：https://jsfiddle.net/s8yoz2aL/1/

Answer 1

如评论中所述，group1Obj 设置不正确。这是修复：

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',]
    let valuesGroup1 = [{"id": 0, "text": roles[0]}, {"id": 1, "text": roles[1]}, {"id": 2, "text": roles[2]}, {"id": 3, "text": roles[3]}];
    let valuesGroup2 = [];
    for (index = 4; index < roles.length; index++) {
        valuesGroup2.push(roles[index]);
    }
  
  var jsonGroup1 = {"text" : "Common Groups"};
  jsonGroup1.children = valuesGroup1;
  var jsonGroup2 = {"text" : "Other Groups"};
  jsonGroup2.children = valuesGroup2;
  
  console.log(jsonGroup1);
  
    let group1Obj = [jsonGroup1, jsonGroup2];
    return group1Obj;
}

JSFiddle

select2 中的组值

Group values in select2

javascript

jquery-select2