Question

我有json对象，我正在尝试使用jquery编写groups_options。我的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元素。也许你可以这样做：

＆＃13;

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)

＆＃13;

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

＆＃13;

分组选项用jquery选择

2 个答案: