Dynamicznie dodając opcje i optgroups w Select2

Question

z następującymi html:

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

Mam problemy z utworzeniem kontrolę Select2 dynamicznie i dodając swoje opcje:

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

Jednak mogę Wygląda na to, że w ten sposób dodasz optgroups. Na blogu znalazłem this dyskusję na temat github i artykuł this, ale ten pierwszy wydaje się nie omawiać dodatków dynamicznych i po prostu nie mogę zrozumieć tego drugiego.

Ktoś ma jakieś pomysły?

Answer 1

Znalazłem odpowiedź pochowany wewnątrz dyskusji github ty związane, struktura obiektu dla optgroups jest następujący:

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

Demo fiddle

Answer 2

Tak, odpowiedź koala_dev za powyższe jest prawidłowe. Jeśli jednak nie chcesz, aby nagłówki grup opcji były tagami do wyboru, usuń pole "id" z nagłówków przekazywanych do select2. Elementy dziecięce [] nadal wymagają pola "id" do wybrania. Na przykład:

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