Hinzufügen dynamisch Optionen und optgroups in Select2

Question

Mit dem folgenden html:

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

ich keine Probleme, dynamisch eine Select2 Kontrolle zu schaffen, und das Hinzufügen meine Optionen: can

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

Aber ich scheint nicht herauszufinden, wie man optgroups auf diese Weise hinzufügen kann. Ich fand this Diskussion auf Github, und this Artikel auf einem Blog, aber der ehemalige scheint nicht zu diskutieren, dynamische optgroup Ergänzungen und ich kann einfach keinen Sinn von letzterem machen.

Wer hat irgendwelche Ideen?

Answer 1

ich die Antwort gefunden in der Diskussion Sie die Objektstruktur für optgroups verknüpft Github begraben, ist wie folgt:

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

Demo fiddle

Answer 2

Ja Antwort oben richtig ist, koala_dev ist. Wenn die Optionsgruppen-Header jedoch keine auswählbaren Tags sein sollen, entfernen Sie das Feld "id" aus den Headern, die Sie an select2 übergeben. Für Children [] muss noch ein "ID" -Feld ausgewählt werden. 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" 
    }, { 
     ... 
    }] 
}]