Dynamically adding options and optgroups in Select2

Question

With the following html:

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

I'm having no trouble creating a Select2 control dynamically, and adding my options:

// 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
});

However, I can't seem to figure out how to add optgroups this way. I found this discussion on github, and this article on a blog, but the former doesn't seem to discuss dynamic optgroup additions and I simply can't make any sense of the latter.

Anyone have any ideas?

Answer 1

I found the answer buried inside the github discussion you linked to, the object structure for optgroups is as follows:

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

Demo fiddle