Dynamisches Hinzufügen von Optionen und Optgroups in Select2

Mit folgendem html:

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

Ich habe keine Probleme, ein Select2-Steuerelement dynamisch zu erstellen und meine Optionen hinzuzufügen:

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

Allerdings finde ich nicht heraus, wie ich hinzufügen soll optgroups Hier entlang. ich fand Dies Diskussion auf github und Dies Artikel in einem Blog, aber der erstere scheint Dynamik nicht zu diskutieren optgroup Hinzufügungen, und letzteres kann ich einfach nicht nachvollziehen.

Hat jemand Ideen?

Ich habe die Antwort in der Github-Diskussion gefunden, auf die Sie verlinkt haben, die Objektstruktur für optgroups ist wie folgt:

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

Demo-Geige

Ja, die obige Antwort von koala_dev ist richtig. Wenn Sie jedoch nicht möchten, dass Optionsgruppen-Header auswählbare Tags sind, entfernen Sie das „id“-Feld aus Headern, die Sie an select2 übergeben. Kinder[ ] Elemente benötigen weiterhin ein “ID”-Feld, um ausgewählt werden zu können. Zum Beispiel:

// `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"
    }, { 
        ...
    }]
}]