Dynamically adding options and optgroups in Select2

javascript, jquery, jquery-select2

Solution

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

Problem

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?

Original source