使用jQuery選擇分組選項

Question

我有我試圖使用jquery編寫一個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");
  );

}}

任何幫助將不勝感激..謝謝！

Answer 1

我不確定這是否是函數中的完整代碼，但是您沒有創建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> 

Answer 2

您當前的代碼未附加任何optgroup元素。 也許您可以執行以下操作：

 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>