web-dev-qa-db-ja.com

Select2でオプションとoptgroupを動的に追加する

次のHTMLの場合：

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

Select2コントロールを動的に作成し、オプションを追加することに問題はありません。

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

ただし、この方法でoptgroupsを追加する方法がわかりません。私はgithubで this ディスカッションとブログで this の記事を見つけましたが、前者は動的なoptgroupの追加について議論していないようで、簡単にできます後者の意味はありません。

誰かアイデアはありますか？

javascriptjqueryjquery-select2
23
a.real.human.being

リンク先のgithubディスカッションの中に答えが埋め込まれているのを見つけました。optgroupsのオブジェクト構造は次のとおりです。

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

デモフィドル

33
koala_dev

はい、上記のkoala_devの答えは正しいです。ただし、オプショングループヘッダーを選択可能なタグにしたくない場合は、select2に渡すヘッダーから「id」フィールドを削除します。 Children []アイテムを選択するには、依然として「id」フィールドが必要です。例えば：

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