Динамическое добавление опций и optgroups в Select2

Со следующим html:

<input type='hidden' id='cantseeme'>

У меня нет проблем с созданием элемента управления Select2 динамически и добавлением моих опций:

// simplified example
var select2_ary = [];

select2_ary.push({
    id : "one",
    text : "one"
});
select2_ary.push({
    id : "two",
    text : "two"
});

$("#cantseeme").select2({
    placeholder : "Pick a number",
    data : select2_ary
});

Однако я не могу понять, как добавить optgroups таким образом. Я нашел эту дискуссию о github и этой статье в блоге, но первая не кажется обсудите динамические добавления optgroup, и я просто не могу понять их.

У кого-нибудь есть идеи?

Ответ 1

Я нашел ответ, заложенный внутри обсуждаемого вами обсуждения github, структура объекта для optgroups выглядит следующим образом:

{
  id      : 1,
  text    : 'optgroup',
  children: [{
                id  : 2,
                text: 'child1'
             },
             {
                id      : 3,
                text    : 'nested optgroup', 
                children: [...]
             }]
}

Демо-скрипт

Ответ 2

Да, ответ koala_dev выше правильный. Однако, если вы не хотите, чтобы заголовки группы параметров были выбираемыми тегами, удалите поле "id" из заголовков, которые вы передаете в select2. Дети [] все еще нуждаются в поле "id", которое можно выбрать. Например:

// `Header One` Is Selectable
[{
    id       : 0,
    text     : "Header One",
    children : [{
        id   : 0,
        text : "Item One"
    }, { 
        ...
    }]
}] 


// `Header One` Is Not Selectable
[{
    text     : "Header One",
    children : [{
        id   : 0,
        text : "Item One"
    }, { 
        ...
    }]
}]