グループ化されたオプションはjqueryで選択します

Question

jsonを使用してgrouped_optionsを作成しようとしているjsonオブジェクトがあります。 私のJSONオブジェクトは、次のようになります。この

data = {"01 CONSULT":[["1b Rules","40"]],"02 DEVELOPMENT":[],"03 QUALITY":[],"05 MARKETING":[["5e Research","66"]],"06 MISCELLANEOUS":[["6a Training","69"],["6b Meetings","70"]} 

私のドロップダウンのようになります。

**01 CONSULT** 
    1b Rules 
**02 DEVELOPMENT** 
**03 QUALITY** 
**05 MARKETING** 
    5e Research 
**06 MISCELLANEOUS** 
    6a Training 
    6b Meetings 

私のコードは、現在このように見えます。私はgrouped_optionsでjqueryを書くのに苦労しているので、ドロップダウンで親の値を取得できません。

function change(data){ 
    $("#task_id").empty(); 
     for(var y in data){ 
     $("#task_id").append(
     $("<option></option>").attr("value", y).text(data[y]).appendTo("optgroup"); 
); 

}}

すべてのヘルプはappreciated..Thanksだろう！

Answer 1

を作成していません。

data = {"01 CONSULT":[["1b Rules","40"]],"02 DEVELOPMENT":[],"03 QUALITY":[],"05 MARKETING":[["5e Research","66"]],"06 MISCELLANEOUS":[["6a Training","69"],["6b Meetings","70"]]} 
 

 
function change(data){ 
 
    var slct = $("#task_id") 
 
    slct.empty() 
 
    
 
    Object.keys(data).forEach(function(og) {     // for each data key 
 
    var optgroup = $("<optgroup></optgroup>", {label: og}) // create optgroup element 
 
    data[og].forEach(function(opt) {      // for each option 
 
     $("<option></option>", {        // create option element 
 
     value: opt[1], 
 
     text: opt[0] 
 
     }).appendTo(optgroup)        // append option to group 
 
    })   
 
    optgroup.appendTo(slct)        // append group to select 
 
    }) 
 
} 
 

 
change(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="task_id"></select>

：たぶん、あなたはこのような何かを行うことができます

Answer 2

私は、これは機能で、あなたの完全なコードであるかどうかわからないですが、あなたはあなたの現在のコードは、どのOPTGROUP要素を追加していませんOPTGROUP

var data = { 
 
    "01 CONSULT": [ 
 
    ["1b Rules", "40"] 
 
    ], 
 
    "02 DEVELOPMENT": [], 
 
    "03 QUALITY": [], 
 
    "05 MARKETING": [ 
 
    ["5e Research", "66"] 
 
    ], 
 
    "06 MISCELLANEOUS": [ 
 
    ["6a Training", "69"], 
 
    ["6b Meetings", "70"] 
 
    ] 
 
}; 
 

 

 

 

 
change(); 
 

 
function change() { 
 
    var $select = $('#task_id'); 
 
    for (d in data) { 
 
    var parent = d; 
 
    var children = data[d]; 
 
    console.log(d); 
 
    var $optgroup = $('<optgroup/>', { 
 
     label: d, 
 
    }).appendTo($select); 
 
    for (c in children) { 
 
     var child = data[d][c]; 
 
     $('<option/>', { 
 
     value: child, 
 
     html: child 
 
     }).appendTo($optgroup); 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="task_id"> 
 
</select>