2016-05-20 6 views
0

・セレクト:https://select2.github.io/のjQuery - ヘッダの問題をセレクト2アレイ

最終結果は、複数の選択ボックスの例https://select2.github.io/examples.htmlと同様であるべきです。

問題:ドロップダウンを表示していますが、すべてのオプションがオブジェクトオブジェクトです。

enter image description here

コード

$(document).ready(function() { 
     function attribute(text) { 
      this.text = text; 
      this.children = []; 
      this.addChild = function (tid, tvalue) { 
       var val = { id: tid, text: tvalue }; 
       this.children.push(val); 
      } 
     } 
     $.get("/products/attributelist", function (data) { 
      var attributeList = []; 
      $.each(data.AttributeGroups, function (i, val) { 
       var tmpAttr = new attribute(val.Name); 
       $.each(val.Attributes, function (val1) { 
        tmpAttr.addChild(val1.Id, val1.Name); 
       }); 
       attributeList.push(tmpAttr); 
      }); 
      $(".js-example-basic-multiple").select2({ 
       data: attributeList 
      }); 
     }); 
    }); 

あなたが適切な形式のためので、あなたがたAttributeList配列に機能(属性)のリストをプッシュし

{ 
    text: 'Group label', 
    children: [ 
    { 
     id: 'nested-1', 
     text: 'First nested option' 
    }, 
    // ... more data objects ... 
    ] 
} 

答えて

0

データ・フォーマットを彼らの可能性が示唆:

var properArray = []; 

for (var i = 0; i< attributeList.length; i++) { 
    properArray.push({text: attributeList[i].text, children: attributeList[i].children}) 
} 

とproperArrayを渡すSELECT2へのデータ

+0

良い十分な答えを、これを試してみてください。各ループに対して、属性の2番目のものがインデックスパラメータなしでミスタイプされました –

0

は、コードは他の問題が、その罰金を持っていた、

$(document).ready(function() { 
     function attribute(text) { 
      return { 
       text:text, 
       children:[], 
       addChild : function (tid, tvalue) { 
        var val = { id: tid, text: tvalue }; 
        this.children.push(val); 
       } 
      } 
     } 
     $.get("/products/attributelist", function (data) { 
      var attributeList = []; 
      $.each(data.AttributeGroups, function (i, val) { 
       var tmpAttr = attribute(val.Name); 
       $.each(val.Attributes, function (val1) { 
        tmpAttr.addChild(val1.Id, val1.Name); 
       }); 
       attributeList.push(tmpAttr); 
      }); 
      $(".js-example-basic-multiple").select2({ 
       data: attributeList 
      }); 
     }); 
    });