2015-12-22 29 views
6

いくつかのアイテムを別々にグループ化する方法optgroups?異なるJSONオブジェクトに設定する必要がありますか?文書番号select2に例はありません。どんな助けや指示が役に立つでしょう。ここでJSONを使用してselect2でoptgroupを設定する方法

select人口のサンプルコードは、次のとおりです。

jQueryコード:

var data = [ 
      { id: 0, text: 'enhancement' }, 
      { id: 1, text: 'bug' }, 
      { id: 2, text: 'duplicate' }, 
      { id: 3, text: 'invalid' }, 
      { id: 4, text: 'wontfix' } 
    ]; 

    $(".js-example-data-array").select2({ 
     data: data 
    }); 
+0

この仕事のための例では、開発者の使用は、サイト内に存在しない '$ htmlの()( "JS-ソースの状態は。");'それらを満たすために。 –

+0

を塗りつぶした後にオブジェクトを削除すると、JSONオブジェクトのみを使用して選択を塗りつぶす方法はありませんか? – raBne

答えて

12

あなたはoptgroupsを許可するように配列にchildren属性を設定する必要があります。

例:https://jsfiddle.net/DinoMyte/8odneso7/13/

var data = [{ 
 
    id: 0, 
 
    text: 'enhancement', 
 
    children: [{ 
 
     id: 5, 
 
     text: 'enhancement child1' 
 
     }, 
 
     { 
 
     id: 6, 
 
     text: 'enhancement child2' 
 

 
     } 
 
    ] 
 
    }, 
 
    { 
 
    id: 1, 
 
    text: 'bug' 
 
    }, 
 
    { 
 
    id: 2, 
 
    text: 'duplicate' 
 
    }, 
 
    { 
 
    id: 3, 
 
    text: 'invalid' 
 
    }, 
 
    { 
 
    id: 4, 
 
    text: 'wontfix' 
 
    } 
 
]; 
 

 
$(".js-example-data-array").select2({ 
 
    data: data, 
 
    width: 'auto' 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<select class="js-example-data-array"> 
 
</select>

+0

素晴らしい!私は私のプロジェクトとその期待どおりの作業でテストしました!ありがとう – raBne

+0

素晴らしい。うれしいことはあなたのために働いた。 – DinoMyte

関連する問題